JS:Axios文件下载

简介: JS:Axios文件下载

本例使用vue做前端项目 和 express做后端服务

axios的config参数 responseType: 'blob' ,很多地方都提到需要设置,我没有设置也能正常下载

依赖

  • concurrently 插件来运行命令
  • nodemon 监控重启 node 后台
  • cors 处理跨域

a标签下载文件

download(){
    let href  = "http://localhost:8080/download";
    const dom = document.createElement('a');
    dom.style.display = 'none';
    dom.href = href;
    document.body.appendChild(dom);
    //点击下载
    dom.click();
    //下载完成移除元素
    document.body.removeChild(dom);
},

axios下载

async downloadFile(){
    const res = await axios.get("http://localhost:8080/file");
    console.log(res);
    const blob = new Blob([res.data], {type: res.headers['content-type']});
    let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
    let result = patt.exec(res.headers['content-disposition']);
    let filename = decodeURI(result[1]);
    const downloadElement = document.createElement('a');
    const href = window.URL.createObjectURL(blob);
    console.log(filename);
    downloadElement.style.display = 'none';
    downloadElement.href = href;
    downloadElement.download = filename ; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
}

后端服务需要做一些特殊设置

// 设置的文件名,需要对 filename 进行转码,防止下载的文件名中有中文时出现乱码。
res.setHeader("Content-Disposition", "attachment; filename=" + encodeURI(filename));
res.setHeader("Content-Type", 'application/octet-stream');
// axios下载文件取不到content-disposition需要添加响应头
res.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

下载图片

可以直接用img标签加链接就可以显示

<img v-if="imageSrc" :src="imageSrc" alt="">

代码文件:https://github.com/mouday/Vue-Demo/tree/main/vue-axios

参考

使用axios如何下载文件

https://blog.csdn.net/shuangmu9768/article/details/108846417

相关文章
|
8月前
|
JavaScript
vue.js+ jquery上传图片并回显
vue.js+ jquery上传图片并回显
|
JavaScript
【ElementUI】Vue+ElementUI多文件上传,一次请求上传多个文件!
教大家一次请求,上传多个文件。 ElementUI如果是默认方案,上传多张图片并不是真正的一次上传多张,而是发送多次请求,一次请求携带一张图片。
1057 0
|
5月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
151 0
|
5月前
|
JavaScript
js之图片上传
js之图片上传
94 0
|
Web App开发 JSON JavaScript
js常见的报错
js常见的报错
91 0
|
JSON 前端开发 JavaScript
ajax和vue.js
ajax和vue.js
|
JavaScript
vue将文件下载到本地
vue将文件下载到本地
292 0
|
JavaScript
js实现简单上传图片
js实现简单上传图片
|
存储 SQL JavaScript
vue 里怎么用 axios 实现 post 请求下载文件
vue 里怎么用 axios 实现 post 请求下载文件
704 0
vue 里怎么用 axios 实现 post 请求下载文件
|
存储 前端开发 JavaScript
聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传
分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:[python花式读取大文件(10g/50g/1t)遇到的性能问题(面试向)](https://v3u.cn/a_id_97)我们讨论了如何读写超大型文件,本次再来探讨一下如何上传超大型文件,其实原理都是大同小异,原则就是化整为零,将大文件进行分片处理,切割成若干小文件,随后为每个分片创建一个新的临时文件来保存其内容,待全部分片上传完毕后,后端再按顺序读取所有临时文件的内容,将数据写入新文件中,最后将临时文件再删掉。
聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传