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/
欢迎入群一起讨论