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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
jQuery操作css样式
May 15 jQuery
JS中offset和匀速动画详解
Feb 06 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php自动获取关键字的方法
2015/01/06 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python字符串切片操作知识详解
2016/03/28 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python实现列表的排序方法分享
2019/07/01 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
一份Java笔试题
2012/02/21 面试题
Internal修饰符有什么含义
2013/07/10 面试题
积极向上的团队口号
2014/06/06 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL