雷火电竞-中国电竞赛事及体育赛事平台

歡迎來(lái)到入門教程網(wǎng)!

JavaScript

當(dāng)前位置:主頁(yè) > 網(wǎng)絡(luò)編程 > JavaScript >

原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法

來(lái)源:本站原創(chuàng)|時(shí)間:2020-01-10|欄目:JavaScript|點(diǎn)擊:

一 、下載

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è)面使用

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



 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)知識(shí)點(diǎn),如果有任何疑問(wèn)和補(bǔ)充大家可以聯(lián)系小編,感謝大家對(duì)我們的支持。

上一篇:Vue學(xué)習(xí)之組件用法實(shí)例詳解

欄    目:JavaScript

下一篇:借助云開發(fā)實(shí)現(xiàn)小程序短信驗(yàn)證碼的發(fā)送

本文標(biāo)題:原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法

本文地址:http://www.jygsgssxh.com/a1/JavaScript/9297.html

網(wǎng)頁(yè)制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語(yǔ)言數(shù)據(jù)庫(kù)服務(wù)器

如果侵犯了您的權(quán)利,請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有