原生js实现文件上传、下载、封装等实例方法


Posted in Javascript onJanuary 05, 2020

一 、下载

1、代码

const fileDownloadClick = (obj) => { // 解决兼容
 if( document.all ){
  obj.click();
 } else {
  let event = document.createEvent("MouseEvents");
  event.initEvent('click', true, true);
  obj.dispatchEvent(event);
 }
}
const fileDownload = (res,obj) => { // 下载
  /*
  obj :{
   userName  下载人
   weeklyTime 下载时间
   weeklyType 下载类型 
  }
 */ 
 let blob = new Blob([res]);
 let url = window.URL.createObjectURL(blob);
 let link = document.createElement('a');
 link.style.display = 'none';
 link.href = url;
 link.setAttribute('download', `${obj.userName || ' '}_${obj.weeklyTime || dateFormatYMD(new Date())}_${obj.weeklyType || '.xlsx' }`);
 document.body.appendChild(link);
 // link.click();
 fileDownloadClick(link);
 window.URL.revokeObjectURL(url);
}

2、请求时,需增加请求头

responseType: 'blob',

3、使用

res: 后台返回的文件流( 类似于乱码的东西 )
obj:下载文件名称

//页面中调用
this.fileDownload = (res,obj)

二、上传 ( 基于vue )

1、页面使用

<input type="file" ref="upload" @change='handleUploadChange($event)' style="display:none;">



 handleUploadFile(row){ // 通过某一事件触发 
  this.$refs['upload'].click();
 },
 
 

  async handleUploadChange(e){ // 
   try{
    let res = await this.CommonUpload(e);
    if(res.code == '200'){ // 获取其他code值,根据后台来定
      this.handleProjectAddFile(res.data)
    }else{}
   }

catch(err){}

}

2、方法封装 ( 只判断大小,也可通过accept判断要接收的类型 等其他类型 )

CommonUpload(e){ 
    const files = e.target.files;
    let formData = new FormData();
    if(files && files[0]) {
      const file = files[0];
      if(file.size > 1024 * 1024 *3) {
        alert('文件大小不能超过3M');
        return;
      } else {
        formData.append("multipartFile", file); 
      }
    }
    this.uploadFile_(formData) // 为调用上传接口方法
  }

3、问题 当再次选择同一文件时,失效

解决: ( 上传后执行下面 )
this.$refs['upload'].value = ''; // 解决 input file 第二次失效的问题

原因:
input file value值为新选中的值,所以下次再选同一文件,不会触发change事件

以上就是本次介绍的全部相关知识点,如果有任何疑问和补充大家可以联系小编,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JS二维数组的定义说明
Mar 03 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
详解jQuery中的prop()使用方法
Jan 05 #jQuery
vue 对axios get pust put delete封装的实例代码
Jan 05 #Javascript
JavaScript修改注册表实例代码
Jan 05 #Javascript
详解JavaScript修改注册表的方法
Jan 05 #Javascript
js判断非127开头的IP地址的实例代码
Jan 05 #Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 #Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 #Javascript
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
高中教师评语大全
2014/04/25 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js