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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
javascript版2048小游戏
Mar 18 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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
德劲1103二次变频版的打磨
2021/03/02 无线电
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
js自定义回调函数
2015/12/13 Javascript
Move.js入门
2017/02/08 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
python复合条件下的字典排序
2020/12/18 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
Ruby如何定义一个类
2012/10/08 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
医院门卫岗位职责
2013/12/30 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
《在家里》教后反思
2014/03/01 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
介绍长城的导游词
2015/01/30 职场文书
事业单位个人总结
2015/02/12 职场文书
无罪辩护词范文
2015/05/21 职场文书
大学军训通讯稿
2015/07/18 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers