前端vue 封装上传文件和下载文件 方法

前端vue 封装上传文件和下载文件 方法

欢迎大佬指导交流

1.下载文件

方法封装：
download.js

// 没有设置代理需要拼接服务器地址
// let baseURL = process.env.VUE_APP_API_BASE_URL  //服务器地址
// let baseURL = 'http://10.10.10.10:8080'

import store from '@/store' //导入token的文件

// url 下载的地址  fileName自定义文件名称
export function downloadEvt(url, fileName) {
  let fileUrl = baseURL + url
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    // 设置了代理的可以不需要拼接baseURL 直接 xhr.open('GET', url, true)  即可
     xhr.open('GET', baseURL ? baseURL + url : url, true) 
     // xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    if (store.getters.token) xhr.setRequestHeader('token', store.getters.token); //请求头统一添加token
    xhr.onload = () => {
      // window.console.log('xhr',xhr)
      if (!xhr.responseURL.includes("Error")) {
      	// 获取后台返回的文件名字（之前相互定义好方式），有跨域的情况下可能会获取不了响应头
        let filenameA = decodeURI(xhr.getResponseHeader("Content-Disposition").split("''")[1].split('.')[0]) 
        if (fileName) {
          filenameA = fileName
        }
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(xhr.response)
        link.download = filenameA || "downloadFileName"
        link.click()
        resolve({ code: 200, success: true, message: "下载成功", otherMessage: "" })
      } else {
        reject({ success: false, message: "下载失败", otherMessage: "" })
      }
    }
    xhr.send()
  })
}
/**   * 友情提示：
      * download的属性是HTML5新增的属性
      * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
      * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
      * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
*/

使用：

      import { downloadEvt } from "@/utils/download"
      // 其实then只是用来处理loading的
      downloadEvt("/api/report/exportDataByXml?exportType=1").then((res) => {
      console.log(res)
      }).catch((error) => {
      console.log(error)
      })

2.下载文件