el-upload 上传文件之后 实现文件流下载

想要下载文件列表的文件 需要在el-upload 上绑定 on-preview 属性

 <el-upload :action='upUrl' :data='upData' :headers="upheaders" :on-preview='dowloadFile' :show-file-list="true" :on-success="handleAvatarSuccess" :before-remove="beforeRemove" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

通过on-preview 的参数获取当前点击文件的参数 ，并调用接口 返回文件流 通过Blob对象 实现文件流下载文件

dowloadFile(file) {

      downFile({
        filePath:file.url
        fileName:file.name
      }).then(res => {
        let blob = new Blob([res]);
        // 获取heads中的filename文件名
        let downloadElement = document.createElement('a');
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后文件名
        downloadElement.download = fileName;
        document.body.appendChild(downloadElement);
        // 点击下载
        downloadElement.click();
        // 下载完成移除元素
        document.body.removeChild(downloadElement);
        // 释放掉blob对象
        window.URL.revokeObjectURL(href);
      })



    },

这样下载的文件会有问题，会造成文件的格式不对，是因为下载的时候没有指定下载的文件类型

想要下载所有类型的文件，直接在请求的时候（axios）加上 responseType: 'blob' 就可以了

export function downFile(data) {
  return request({
    url: '/xxxx/xxx ',
    method: 'post',
    data,
    responseType: 'blob'
  })
}