使用axios下载后端数据流

axios vue

字数统计: 312阅读时长: 1 min

 2021/09/03   Share

前言

前后端交互过程中,难免会出现文件下载的功能, 那么我们如果通过axios去下载文件呢？

后端

后端我们采用的是Python, 实际代码如下

f = ftp.open(path)
response = FileResponse(f)
response['Content-Disposition'] = f'attachment;filename="{path.split("/")[-1]}"'
return response

前端

axios 配置

export function getFile(id, path) {
  return request({
    url: '/api/file/object/',
    method: 'get',
    params: { id: id, path: path },
    responseType: 'blob',
    timeout: 1000000000
  })
}

核心代码

handleDownload(fileName) {
      const path = this.path + '/' + fileName
      getFile(this.id, path).then(response => {
        const url = window.URL.createObjectURL(new Blob([response]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', fileName) // or any other extension
        document.body.appendChild(link)
        link.click()
        link.remove()
      })
    }

思考

使用此方法下载的时候, 文件进度是无法显示的, 只会在所有进度下载完成以后才会保存.

并且在下载的过程中, 文件的内容是率先保存在内存当中, 如果是大文件则无法使用.

总结下来, 尽量不要使用xhr去下载大文件, 如果要下载大文件则推荐使用浏览器

1	windows.open(url)

但是使用浏览器的功能, 去下载一些需要鉴权的文件就需要额外的判断.

参考文档

[1] how-to-download-files-using-axios

原文作者：Momo

原文链接：https://mo.xmomo521.top/2021/09/03/使用axios下载后端数据流/

发表日期：September 3rd 2021, 4:38:48 pm

更新日期：December 21st 2021, 3:32:58 pm

Next Post

paramiko连接多层跳板后的机器
Previous Post

修改ES数据节点的默认分片数量

CATALOG

1. 前言
2. 后端
3. 前端
1. 3.1. axios 配置
4. 思考
5. 参考文档



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true