vue中实现上传 ，下载功能

上传功能（包括上传图片，上传文件）
使用 element 组件库 https://element.eleme.cn/#/zh-CN/component/upload

<el-upload
class="avatar-uploader"
:disabled="isUpload"
action=""
:show-file-list="false"
:before-upload="beforeUpload">
<el-button size="small" type="primary" @click="selImg">点击上传</el-button>
</el-upload>

//函数解析
//before-upload
//上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
beforeUpload(file) {
//上传文件的文件流是无法被序列化并传递的。所以我们就可以使用到formdata对象
//简单理解就是 new FormData() 包裹之后 生成的是二进制文件流
const formData = new FormData()
formData.append('file', file)
Upload(this.reportId,formData).then(res => {
if (!res.data.success) {
this.$message.error(res.data.msg)
return false
}
this.$message.success('上传成功')
this.loadTableData()
})
return false
},

下载文件功能
如果是文件流的形式，需要借用a标签

const token = this.$store.state.tionToken
let a = document.createElement('a') //创建一个a标签元素
a.style.display = 'none' //设置元素不可见
a.href = `${location.origin}/api1/1t/${val.id}/load?access_token=${token}` //设置下载地址
document.body.appendChild(a) //加入
a.click() //触发点击,下载
document.body.removeChild(a)// 在dom中移除a标签

responseType为blob的请求

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件
通俗的说，Blob就是h5提供的一个用于操作流的api

axios({
method: data.method,
url: `${data.url}${data.params ? "?" + data.params : ""}`,
responseType: "blob",
//这个地方如果responseType设为blob的话，返回的文件流将会被转成blob对象，
//不是文件流，但是无论怎么设置都没有转成blob对象，
data: data.data
})
.then(res => {
/**
* blob下载思路
* 1） 使用ajax发起请求，指定接收类型为blob（responseType: "blob"）
* 2）读取请求返回的头部信息里的content-disposition，返回的文件名就在这里面（或者自定义文件名，可跳过此步骤）
* 3）使用URL.createObjectURL将请求的blob数据转为可下载的url地址
* 4）使用a标签下载
*
*/
const link = document.createElement("a"); // 创建一个下载标签<a>
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
link.style.display = "none";
link.href = URL.createObjectURL(blob); //将请求的blob数据转为可下载的url地址

// link.download = res.headers['content-disposition'] //下载后文件名
link.download = data.fileName; //下载的文件名
document.body.appendChild(link);
link.click(); // 模拟点击下载
document.body.removeChild(link); // 移除改下载标签
})
.catch(error => {
this.$Notice.error({
title: "错误",
desc: "网络连接错误"
});
// console.log(error);
});

图片预览功能

<img src="" alt="" />
//<img class="img" src="" alt="" />

let reader
if (formData.get("file")) {
// 创建流对象
reader = new FileReader()
reader.readAsDataURL(formData.get("file"))
console.log('reader' ,reader)
}
// 捕获 转换完毕
reader.onload = function(e) {
// 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
document.querySelector('img').src = e.target.result
//document.getElementsByClassName('img')[0].src = e.target.result
}

参考文章：http://blog.ncmem.com/wordpress/2023/10/26/vue%e4%b8%ad%e5%ae%9e%e7%8e%b0%e4%b8%8a%e4%bc%a0-%ef%bc%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/

欢迎入群一起讨论