【vue实现的前端对文件的下载】el-upload上传文件中的前端下载文件方法

最新推荐文章于 2025-03-23 14:15:41 发布

努斯交易日

最新推荐文章于 2025-03-23 14:15:41 发布

阅读量3.9k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_52428783/article/details/126384622

版权

本文介绍了如何在Vue.js项目中利用el-upload组件实现前端文件下载。通过Blob对象理解文件处理，并详细解析了handleDownLoad方法，该方法接收从el-upload插槽获取的file对象来触发文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

vue实现的前端对文件的下载操作。这里实现对文件的下载是基于从已经写好的文件服务器的文件下载家口来进行下载的。护照要是记录方便日后查找。

一、Blob

首先要了解一下Blob：
Blob() 构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值串联组成。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

常用的blob的语法：
Blob blob = new Blob(array, option);

参数说明：

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
type，默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变 Non-Standard

二、实现下载

el-ipload：

这里和elementui官网的是一样的，可以去官网看一下

<el-upload
	ref="upload"
	accept=”.pdf “ // 允许上传文件类型
	:action="url" // 上传地址
	:file-list="fileList" // 绑定上传的文件列表
	list-type="picture-card"
>
	// 上传框的图标
	<i slot="default"  class="el-icon-plus" />
	// 通过插槽定义方法
	<div slot="file" slot-scope="{file}" >
		<img src=""  class="" />
		<span class="el-upload-list__item-actions">
			<span
			class="el-upload-list__item-delete"
			@click="handleDownLoad(file)"
			>
				<i class="el-icon-download" />
			</span>
		</div>
	</div>
</el-upload>