VUE-文件下载和上传

上传文件接口的axios封装

主要是 responseType: 'blob' 决定接口返回的数据类型

export function postJsonFetchImport(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, {
      headers: {
        "content-type": "application/x-www-form-urlencoded"
      },
      responseType: 'blob' // 设置服务器响应的数据类型为blob
    })
      .then(
        (response) => resolve(response.data),
        (err) => reject(err)
      )
      .catch((error) => reject(error))
  })
}

实际调用

/** 上传表格文件模板 */
const startingImportFile = async () => {
   let formData = new FormData(); // 创建FormData对象
   formData.append('file', fileList.value[0].originFileObj); // 添加文件到表单数据中
   formData.append('viewId', 'viewId'); // 添加文件到表单数据中
   res = await urls.importUndergraduateCourse(formData)
   if (!res.size) { // 与后端开发约定，接口调用成功后什么都不返回
    message.success("文件上传成功！");
   } else { // 失败后返回失败原因文件
    message.error("文件上传失败！");

    // 下面是接口返回错误提示的文件信息，如果直接返回字符串提示就没必要添加
    wrongFile.value = new Blob([res], { type: 'application/vnd.ms-excel' }); // 
    let u = window.URL.createObjectURL(wrongFile.value); //创建一个新的 URL 对象
    let aLink = document.createElement("a"); //在页面上生成一个a标签并指定href为上面的url,然后模拟点击，以实现自动下载
    aLink.style.display = "none"; //隐藏
    aLink.href = u;
    aLink.setAttribute("download", "校验有误数据.xlsx");
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
    window.URL.revokeObjectURL(u);  //删除a标签节点
  }
}

注意点：
不同组件库中上传文件组件 上传前（beforeUpload） 事件返回的文件格式是不一样的，但是传给后端的时候要确保 文件参数的内容 是下图的格式（单个文件的时候）

image.png