原生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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
js实现验证码干扰(动态)
Feb 23 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
中英文字符串翻转函数
2008/12/09 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
javascript的push使用指南
2014/12/05 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
django 信号调度机制详解
2019/07/19 Python
Python交互式图形编程的实现
2019/07/25 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
详解Python多线程下的list
2020/07/03 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
送货司机岗位职责
2013/12/11 职场文书
思想汇报格式
2014/01/05 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
门卫管理制度范本
2015/08/05 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书