前端使用axios下载文件和上传文件

首先,axios实例在发起下载文件请求时,应该配置responseType: 'blob',例如:

javascript 复制代码
// axios发起下载文档请求
export const downloadDoc = (id: string) => {
  return request.get(`/downloadDoc?id=${id}`, {
  	// 参考官方文档https://www.axios-http.cn/docs/req_config,responseType: 'blob'是浏览器专属
    responseType: 'blob'
  }) as Promise<Blob>
}
// 下载文件通用函数
export function download(filename: string, data: Blob): void {
  let downloadUrl = window.URL.createObjectURL(data) //创建下载的链接
  let anchor = document.createElement('a') // 通过a标签来下载
  anchor.href = downloadUrl
  anchor.download = filename // download属性决定下载文件名
  anchor.click() // //点击下载
  window.URL.revokeObjectURL(downloadUrl) // 下载后释放Blob对象
}

download的属性是HTML5新增的属性 href属性的地址必须是非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口),这时download就会不起作用。 此时,如果是下载浏览器无法解析的文件,例如.exe,.xlsx...那么浏览器会自动下载,但是如果使用浏览器可以解析的文件,比如.txt,.png,.pdf...浏览器就会采取预览模式;所以,对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream,如果为application/pdf浏览器则会判断文件为 pdf ,自动执行预览的策略)

同时,axios响应拦截器应该如下配置:

javascript 复制代码
// 响应拦截器
request.interceptors.response.use(
  (response: AxiosResponse) => {
    // 如果是下载文件,直接返回data就行了
    if (response.headers['content-type'] === "application/octet-stream") {
      return response.data
    }
    ...
  }
}

最终,在进行下载文件的地方

javascript 复制代码
// 点击下载
const clickDownload = async () => {
  if (props.nowType !== KnowledgeType.RecycleBin) {
    try {
      const res = await downloadDoc(knowledgeStore.knowledgeList[props.item].id)
      download(docName, res)
    } catch {
      ElMessage.error('下载失败')
    }
  }
}

顺带一提上传文件的方法:设置'Content-Type': 'multipart/form-data'即可,然后表单参数里放文件

javascript 复制代码
export const postUpload = (data: File) => {
  return request.post('/upload', {
    file: data
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}
相关推荐
Json_1817901448013 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网36 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020438 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing40 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月44 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端