element ui Upload 文件上传成功，后端返回的二进制文件流的解析和下载

最新推荐文章于 2025-03-24 11:18:43 发布

冬天不起床

最新推荐文章于 2025-03-24 11:18:43 发布

阅读量9.5k

点赞数 5

分类专栏： element ui

本文链接：https://blog.csdn.net/weixin_48284431/article/details/117784965

版权

element ui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在使用Element UI时如何进行文件上传，并在后端返回二进制文件流后进行解析和下载。首先全局导入Element UI组件，然后在data中设置上传所需的action、headers和fileList。headers中携带token，确保上传请求的身份验证。当文件上传成功，handleAvatarSuccess方法会被调用，接收到的res是二进制文件流。通过new Blob()方法将文件流转换为可下载的Blob对象，实现文件的下载。同时，文章还提到了如何限制上传文件的大小，以防止过大文件的上传。

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

1.全局导入element ui 之后，直接在页面使用

2.在data里面定义 action、headers、fileList

fileList置空；
header里携带token：token在登录成功之后，后端返回给前端的，可以存在localStorage、cookies、vuex状态管理，其中'Bearer '是后端要求加在token前面的（不要求就不加）
action：上传文件的接口地址

3.上传文件成功后(handleAvatarSuccess(res,file,fileList){} :res返回的是二进制文件流)

submitUpload(){
    // upload 是在<el-upload> 标签上绑定的ref
    //submit() 方法把表单数据提交到 Web 服务器。
    this.$refs.upload.submit(); 
}

4.对二进制文件流的解析下载(用new Blob() 处理文件流)

handleAvatarSuccess(res, file, fileList) {
	if (!res) {
	    return
	}
	//Blob对象						
	console.log(new Blob([res]))
	//URL.createObjectURL用于创建 URL 的 File对象、Blob对象或 MediaSource对象。
	let url = window.URL.createObjectURL(new Blob([res]))
	let link = document.createElement('a')
	link.style.display = 'none'
	link.href = url
	link.setAttribute('download', file.name)
	document.body.appendChild(link)
	link.click()
},

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。
语法：var aBlob = new Blob( array, options );

另外：可以限制上传文件的大小

beforeupload(file) {
    // file.size 的结果是字节
	const isLtKB = file.size / 1024
	if (isLt5M < 5120) 
		console.log('上传成功，请耐心等待下载')
		return true
	} else {
		console.log('请上传小于5M的文件')
		return false
	}
},

文件返回的是字节

1M=1024kb

1kb=1024字节