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调试工具(下载)
Jan 09 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
javascript 精粹笔记
May 09 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
require.js中的define函数详解
Jul 10 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 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
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python文本数据处理学习笔记详解
2019/06/17 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
长青弘远的面试题
2012/06/09 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
十佳少年事迹材料
2014/12/25 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
合同审查法律意见书
2015/06/04 职场文书