vue处理文件流实现上传下载

1.文件流转base64
axios({
method: "post",
url: "************",
responseType: "blob", //必须将返回数据格式更改为 blob 格式
}).then(res => {
// 处理返回的文件流数据转为blob对象
let blob = new Blob([res.data], { type: "image/jpeg" });
filetoBase64(blob).then(res => {
//此时的 res 是返回处理后文件的base64编码
this.avatarImg = res;
});
});

//文件转 base64
export const filetoBase64 = file => {
let reader = new FileReader(); //实例化文件读取对象
reader.readAsDataURL(file); //将文件读取为 DataURL,也就是base64编码
return new Promise((reslove, reject) => {
reader.onload = e => {
//文件读取成功完成时触发
let dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码
reslove(dataURL);
};
});
};

2.文件下载
// (1)利用window.open("文件地址")
windows.open()
// (2)利用 a 标签
const link = document.createElement('a');
const blob = new Blob([res.data]);
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.download = "这是文件名";//设置下载文件名
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(blob) //释放URL

3.文件上传
<input type="file" class="fileInp" style="display:none" @change="fileChange" />

fileChange(event) {
let file = event.target.files[0]; //获取上传的文件
let forms = new FormData() //创建表单对象，因为文件上传必须以表单形式上传
forms.append('multipartFile', file) //追加上传的文件
forms.append('name','xiaoming' ) //其他附加的数据
axios({
url: process.env.VUE_APP_BASE_API + "/OfficeWorkerMng/BapMember/uploadLrm",
method: "post",
data: forms,
}).then(res => {
this.$message.success("上传成功");
})
},

参考文章：http://blog.ncmem.com/wordpress/2023/10/26/vue%e5%a4%84%e7%90%86%e6%96%87%e4%bb%b6%e6%b5%81%e5%ae%9e%e7%8e%b0%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd/

欢迎入群一起讨论