vue upload 上传下载

目录

上传

下载

对象/文件流

download处理返回

文件流

axios.post

封装axios

1.请求设置类型responseType: 'blob'

2.若有请求拦截(直接返回即可)

3.download

4.请求下载

相关基础

blob

MIME

---

vue 实现文件上传、下载的方法 - 掘金

上传

submitAddFile(){
            var formData = new FormData();
            formData.append('num', this.addType);
            formData.append('linkId',this.addId);
            formData.append('rfilename',this.addFileName);
            for(var i=0;i {
                if(response.data.info=="success"){this.$message({
                        type: 'success',
                        message: '附件上传成功!'
                    });
                }
            })
        }

下载

对象/文件流

download处理返回

export const download= (response: { data?: any; config?: any }) => {
  console.log("response", response);
return new Promise((resolve, reject) => {
  const fileReader = new FileReader();
  fileReader.onload = function () {
    try {
      console.log("result:", this.result);
      const jsonData = JSON.parse((this as any).result); // 成功 说明是普通对象数据
      if (jsonData?.code !== 200) {
        errorMsgTips(jsonData?.message ?? "请求失败");
        reject(jsonData);
      }
    } catch (err) {
      // 解析成对象失败，说明是正常的文件流
      // responseType为blob，以便接收二进制数据。
      const blob = new Blob([response.data]);
      // 本地保存文件
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      const filename = response?.config.headers?.["content-disposition"]
        ?.split("filename*=")?.[1]
        ?.substr(7);
      link.setAttribute("download", decodeURI(filename));
      document.body.appendChild(link);
      link.click();
      resolve(response.data);
    }
  };
  fileReader.readAsText(response.data);
});

文件流

axios.post

// Vue组件中的方法
methods: {
  downloadFile() {
    axios.post('/api/download', { /* 请求参数 */ }, { responseType: 'blob' })
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.style.display = 'none'
        link.href = url;
         const filename = response?.config.headers?.["content-disposition"]
           ?.split("filename*=")?.[1]
           ?.substr(7);
         link.setAttribute("download", decodeURI(filename));// 指定下载后的文件名，防跳转
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  }
}

从响应头中提取文件名：响应头的Content-Disposition字段的值具有形式类似于filename*=UTF-8''example-file.txt，并提取出文件名example-file.txt。

封装axios

vue 下载文件  后端直接返回文件流，打开下载文件是 [object Object]，将res改成res.data即可

1.请求设置类型responseType: 'blob'

import request from '@/utils/request'
const baseUrl = process.env.NODE_ENV === 'development' ? '/test' : ''
const mock = false

export const postQuery = (params:string) => {
  const url = mock ? `${baseUrl}/xxx:8081/otherIndexUpload/${params}`: `${baseUrl}/otherIndexUpload/${params}`
  console.log('post: ',url)
  return request({url,method:'post', responseType: 'blob'})
}

return request({
    url: '/data/wos/download',
    method: 'post',
    data,
    responseType: 'blob',
    timeout: 3000000,
    onDownloadProgress: function (progressEvent: any) {
      // 处理原生进度事件
      store.state.percent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
      console.log(`下载进度：${store.state.percent}`)
      if (Number(store.state.percent) == 100) {
        store.commit('changeProgress')
      }
    }
  })​

2.若有请求拦截(直接返回即可)

import service from 'axios'

// 响应拦截器
service.interceptors.response.use(
  (response: { data: any; config: any }) => {
    const resData = response.data || {}
    if (response.config.responseType === 'blob') {
      return response
    }..
  },
  (error: any) => {
...
  }
)

export default service

3.download

export const download = (res: any) => {
  var blob = new Blob([res.data], {
    type: "application/vnd.ms-excel;charset=utf-8",
  });
  var url = window.URL.createObjectURL(blob);
  var aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.download = "其他数据指标模版.xls";
  aLink.href = url;
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}

4.请求下载

toDownloadTemplate() {
    console.log('下载模板')
    API.postQuery(`downloadTemplate/${this.wpReleId}`).then((res: any) => {
      if (res.data.type === "application/json") {
        this.$message.warning("指标配置内容为空")
      } else {
        download(res);
      }
    })
  }

相关基础

blob

二进制大对象（Binary Large Object）。Blob是存储二进制数据的数据类型，例如图像、音频和视频文件等

MIME

多用途互联网邮件扩展（Multipurpose Internet Mail Extensions）表示传输的文件的性质和格式。在HTTP头部或其他协议中指定一个特定的字符串，来标识文件的类型。

主类型表示文件的大类别，

"application"表示应用程序类型，

"text"表示文本类型，

"image"表示图像类型等。

子类型表示具体的文件格式，

"plain"表示纯文本，

"vnd"表示自定义类型

"vnd.ms-excel"：Microsoft Excel电子表格文件。