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的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
js实现秒表计时器
Dec 16 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
详解Vue之事件处理
Jul 10 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
医院办公室主任职责
2013/12/29 职场文书
信息技术教学反思
2014/02/12 职场文书
有趣的广告词
2014/03/18 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
Python访问Redis的详细操作
2021/06/26 Python