這篇文章給大家分享的是有關(guān)如何使用原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在溫州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需求定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都全網(wǎng)營(yíng)銷,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),溫州網(wǎng)站建設(shè)費(fèi)用合理。

一 、下載

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 下載時(shí)間
   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、請(qǐng)求時(shí)，需增加請(qǐng)求頭

responseType: 'blob',

3、使用

res: 后臺(tái)返回的文件流（ 類似于亂碼的東西 ）
obj：下載文件名稱

//頁(yè)面中調(diào)用
this.fileDownload = (res,obj)

二、上傳 （ 基于vue ）

1、頁(yè)面使用

 handleUploadFile(row){ // 通過(guò)某一事件觸發(fā) 
  this.$refs['upload'].click();
 },
 
　

  async handleUploadChange(e){ // 
   try{
    let res = await this.CommonUpload(e);
    if(res.code == '200'){ // 獲取其他code值，根據(jù)后臺(tái)來(lái)定
      this.handleProjectAddFile(res.data)
    }else{}
   }
　　　　catch(err){}
　　}

2、方法封裝 （ 只判斷大小，也可通過(guò)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('文件大小不能超過(guò)3M');
        return;
      } else {
        formData.append("multipartFile", file); 
      }
    }
    this.uploadFile_(formData) // 為調(diào)用上傳接口方法
  }

3、問(wèn)題 當(dāng)再次選擇同一文件時(shí)，失效

解決： （ 上傳后執(zhí)行下面 ）
this.$refs['upload'].value = ''; // 解決 input file 第二次失效的問(wèn)題

原因：
input file value值為新選中的值，所以下次再選同一文件，不會(huì)觸發(fā)change事件

感謝各位的閱讀！關(guān)于“如何使用原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！