1丶上传

  let fileTypeMime = ""; // 文件 mime 类型，移动端必传，否则下载不成功；pc端可传可不传
  switch (
    fileSuffix // 获取后缀对应的 mime
  ) {
    case "png":
      fileTypeMime = "image/png";
      break;
    case "doc":
      fileTypeMime = "application/msword";
      break;
    case "docx":
      fileTypeMime =
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      break;
    case "jpg":
    case "jpeg":
      fileTypeMime = "image/jpeg";
      break;
    case "gif":
      fileTypeMime = "image/gif";
      break;
    case "svg":
      fileTypeMime = "image/svg+xml";
      break;
    case "tif":
    case "tiff":
      fileTypeMime = "image/tiff";
      break;
    case "txt":
      fileTypeMime = "text/plain";
      break;
    case "ppt":
      fileTypeMime = "application/vnd.ms-powerpoint";
      break;
    case "pptx":
      fileTypeMime =
        "application/vnd.openxmlformats-officedocument.presentationml.presentation";
      break;
    case "xls":
      fileTypeMime = "application/vnd.ms-excel";
      break;
    case "xlsx":
      fileTypeMime =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      break;
    case "zip":
      fileTypeMime = "application/zip";
      break;
    case "7z":
      fileTypeMime = "application/x-7z-compressed";
      break;
  }
  // 获取后台返回的 文件名 注意axios 请求拦截器需直接返回 response才可以通过res.headers获取文件名 
  // blob获取文件名 需要后台配置content-disposition
  const hs = data.headers["content-disposition"];
  let fileNameRE = hs.split("=")[1].split(".")[0];
  let fileName = "";
  if (hs) {
    // const reg = /filename=(.*)/;
    // fileName = reg.exec(hs)[1].trim();
    fileName = decodeURIComponent(fileNameRE);
  }
  let blob = window.URL.createObjectURL(
    new Blob([data.data], {
      type: fileTypeMime,
    })
  );
  
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = blob;
  link.setAttribute("download", fileName + fileSuffix);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); //下载完成移除元素
  window.URL.revokeObjectURL(blob); //释放掉 blob 对象
}

复制代码

2丶axios请求需要设置项

3丶下载自定义文件名(用于oss下载文件裂开时,常规使用第二步的方法即可) // 下载文件 downLoadUrl(ossUrl, url, name) { // window.open(ossUrl); const fileName = name + url.split("_")[1]; // console.log(fileName,"哈哈哈"); this.startUpLoad(ossUrl, fileName); },

startUpLoad(url, fileName) {
  const x = new XMLHttpRequest();
  x.open("GET", url, true);
  x.responseType = "blob";
  x.onload = function () {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
  };
  x.send();
},