原生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倒计时代码汇总
Nov 25 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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将数据导入到Foxmail
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python通过实例讲解反射机制
2019/10/17 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
大班幼儿评语大全
2014/04/30 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers