vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)


Posted in Javascript onMay 10, 2019

vue-cli+axios实现附件上传下载记录:

上传:

这里用formData格式传递参数;请求成功后后台返回上传文件的对应信息。

重点是下载:

##############
downloadfile(res) {
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var contentDisposition = res.headers['content-disposition']; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
var result = patt.exec(contentDisposition);
var filename = result[1];
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
var reg = /^["](.*)["]$/g;
downloadElement.style.display = 'none';
downloadElement.href = href;
downloadElement.download = decodeURI(filename.replace(reg,"$1")); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
##########################

使用blob接收文件流,中间var reg = /^["](.*)["]$/g;为了解决下载的文件前后有_问题,把两侧的" "去掉可正常显示;

decodeURI():对后台返回的中文文件名url编码进行转码

PS:下面看下VUE+axios上传文件,下载文件中的一个坑。

问题描述:最近一个项目中使用axios进行上传和下载,但是上传和下载是需要定义responseType和headers的,这样问题就出来了当你没有权限时候这个接口是抛出一个json数据的,同样上传格式错误也是一个json数据的;由于已经定义了responseType所以接到的数据是已经被转换的数据,它同样会进行下载这时候就需要我们判断返回数据时候的headers是否为文件以外的定义,然后将blob数据转化为json数据即可。代码如下

下载文件为例:

let requsetFile = (params,baseurl,url) =>{
 axios({
  method: 'get',
  baseURL:baseurl,
  url: url,
  headers: {'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}, //定义相应头
  responseType: 'blob',  //定义
  data:params.query || {}
 })
  .then(function(res){
   params.success && params.success(res)
  })
  .catch(function(error){
   params.error && params.error(error)
  })
}
//下面为判断headers和转化blob为json
api.Templet({
      success:res=>{
       const isEXCLE = res.headers["content-type"] === ("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || "application/vnd.ms-excel");
       if(!isEXCLE){
        let reader = new FileReader();
        reader.onload = e => this.$message.error(JSON.parse(e.target.result).msg);
        reader.readAsText(res.data);
       }else {
        let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
        const fileName = `模板文件${Date.parse(new Date())}.xlsx`;
        if ('download' in document.createElement('a')) { // 非IE下载
         const elink = document.createElement('a');
         elink.download = fileName;
         elink.style.display = 'none';
         elink.href = URL.createObjectURL(blob);
         document.body.appendChild(elink);
         elink.click();
         URL.revokeObjectURL(elink.href); // 释放URL 对象
         document.body.removeChild(elink);
        } else { // IE10+下载
         navigator.msSaveBlob(blob, fileName);
        }
       }
      }
     })

总结

以上所述是小编给大家介绍的vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue element中axios下载文件(后端Python)
May 10 #Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 #Javascript
简单通过settimeout看javascript的运行机制
May 10 #Javascript
详解js实时获取并显示当前时间的方法
May 10 #Javascript
JS获取本地地址及天气的方法实例小结
May 10 #Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 #Javascript
vue无限轮播插件代码实例
May 10 #Javascript
You might like
解析php中heredoc的使用方法
2013/06/17 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
28个JS验证函数收集
2010/03/02 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python中可以声明变量类型吗
2020/06/18 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
小兵张嘎观后感
2015/06/03 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python