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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
JS截取字符串实例详解
Nov 24 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 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_flip() 删除数组重复元素
2009/01/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
Position属性之relative用法
2015/12/14 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
express express-session的使用小结
2018/12/12 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python Flask实现restful api service
2017/12/04 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python实现名片管理系统项目
2019/04/26 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
使用Pycharm分段执行代码
2020/04/15 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
英语专业学生个人求职信范文
2014/01/06 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
应用数学专业求职信
2014/03/14 职场文书
公证书样本
2014/04/10 职场文书
六一亲子活动总结
2014/07/01 职场文书
物业消防安全责任书
2014/07/23 职场文书
师德师风自查总结
2014/10/14 职场文书
2014年医生工作总结
2014/11/21 职场文书
2014年党总支工作总结
2014/12/18 职场文书
食品安全责任书范本
2015/05/09 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js