前端处理文件流（下载，上传）

下载(接口返回的是文件流的)

首先配置请求的地方加上responseType:"blob" ！！！

export function downloadTestExcel() {
  return crewordRequest({
    url: "路径",
    method: "get",
    responseType: "blob",
  });
}

然后绑定点击事件

async downLoad(){
         const res = await downloadTestExcel()       //调用方法
         let blob = new Blob([res], {
           type: "application/octet-stream",
         });
         var link = document.createElement("a");       
         link.href = window.URL.createObjectURL(blob);
         link.download = "常用语库.xls";
         link.click();
         //释放内存
         window.URL.revokeObjectURL(link.href);
},

上传

自己手写文件上传

1.首先创建一个input类型为file的标签（input file类型标签不能自定义样式，如果要自定义样式的话就要隐藏这个input 然后写自己需要的样式，最后绑定点击事件去触发input）

<input ref="file" type="file" accept=".xls,.xlsx" style="display:none"  @change="fileChange">

触发input

this.$refs.file.click()

2.给input绑定change事件，在input发生改变的时候去获取文件流和名字等（这里我只获取了文件流，但是名字什么的都在文件流里面，可以console出来看看就知道了）

fileChange(e){
        let file = e.target.files[0]
},

3.获取到了文件流，就是调用接口传给后台

 async upload(file){
        let formData = new FormData()
        formData.append("file",file)
        const res = await uploadOftenWord(formData)
        if(res.code === 200){
          console.log(res)
        }
 },

注：如果是多文件上传的话，就在input里面加上 multiple="multiple" 这个属性，然后去获取fileList这个数组， 这个数组就是 e.target.files数组，最后上传如下

async upload(fileList){
        let formData = new FormData()
        fileList.map(item=>{
            formData.append("file",item)        
        })
        const res = await uploadOftenWord(formData)
        if(res.code === 200){
          console.log(res)
        }
},

因为FormData 的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

如果要清空file文件 可以用下面这个方面

this.$refs.file.value = ""