原生js 文件 上传 下载封装

Posted 王希有

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js 文件 上传 下载封装相关的知识,希望对你有一定的参考价值。

 

一 、 下载

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事件

以上是关于原生js 文件 上传 下载封装的主要内容,如果未能解决你的问题,请参考以下文章

原生js实现文件上传

android的自带的httpClient 怎么上传文件

原生的js实现jsonp的跨域封装

回归 | js实用代码片段的封装与总结(持续更新中...)

python3向ftp服务器上传和下载封装(包括文件夹的上传和下载)

python3向ftp服务器上传和下载封装(包括文件夹的上传和下载)