vue中用js實現文件上傳和文件下載

在vue中，可以使用現有的框架，例如element-ui或者ant-design等來直接實現上傳文件和下載文件。

但是我不想使用框架，直接用js來實現。

一、上傳文件

1.編寫頁面

//上面這個按鈕是用來顯示上傳按鈕的
<div class="addFile">
    <button @click="trigger">選擇文件</button>
 </div>
 
//這個input才是實際上傳文件的容器，通過css讓它不顯示出來，只有上面的按鈕
<input type="file" ref="fileBtn" id="uploadFile" accept="image/*"                    //限制上傳文件的類型，不寫就表示所有文件都支持
      @change="getFile($event)"           //上傳文件時觸發事件
      multiple="multiple"                 //是否支持上傳多個文件
 />

 

2.js編寫

//點擊選擇文件觸發的事件，觸發input的click事件
trigger() { this.$refs.fileBtn.dispatchEvent(new MouseEvent("click")); }, //上傳文件
getFile(event) { let file = event.target.files[0]; uploadImg(file) //上傳到服務器
      .then(res => { ... document.getElementById("uploadFile").value = null; }) .catch(error => { ... }); }

注：建議在上傳文件成功后，將這個文件的value置為null，因為不清空這個input的value，是不能重復上傳相同的文件，原因是input的value值不變，change事件不識別文件有變化。

 

二、下載文件

1.這種方法比較適合點擊下載，調接口，返回的數據時下載地址，若已知下載地址，可以直接用a標簽下載。

2.js代碼：

//1.先創建一個a標簽
let a = document.createElement("a");
 //2.給a標簽的href賦上下載地址
a.href = downurl;
 //3.讓a標簽不顯示在視圖中
a.style.display = "none";
 //4.將a標簽append到文檔中
document.body.appendChild(a);
 //5.a標簽自點擊
a.click();
 //6.點擊下載后，銷毀這個節點
document.body.removeChild(a);