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 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Python计算字符宽度的方法
2016/06/14 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Django 内置权限扩展案例详解
2019/03/04 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
实践单位评语
2014/04/26 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
行政处罚告知书
2015/07/01 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技