HTML input 實現檔案上傳

現在實現檔案上傳的方式有許多，有使用HTML的input標籤的，也有使用element ui或者vant外掛協助完成的，等等。本文在現有的vue專案中，通過HTML原生的input，觸發事件，呼叫web API的檔案讀取介面，獲取檔案資訊，（這裡的檔案主要指圖片檔案），並把檔案顯示在瀏覽器視窗。

1.我們做了一個檔案上傳的按鈕，

1 <input id="uploadfile" type="file  name="files[]" multiple @change="getfile($event)" />

效果：

2. 在點選按鈕後，input會自動呼叫本地檔案瀏覽的視窗，使用者選擇某一檔案

3.使用者選擇完某一檔案後，檔案資訊會通過event傳參，進入到getfile函式中

getfile方法 程式碼：

 1   /** 上傳圖片 */
 2   getfile(e) {
 3       let _this = this;
 4       let files = e.target.files;
 5       console.log("files ...",files)
 6 
 7       let names = [];
 8       for (let i = 0; i < files.length; i++) {
 9
 
         let file = files[i];
10         let reader = new FileReader();
11         reader.readAsDataURL(file);
12         reader.onload = function(res) {
13         };
14       }      
15   }

控制檯列印資訊

4. 我們對獲取到的檔案資訊

• input 元素上選擇檔案後返回的 FileList 物件.
• new FileReader()返回一個新構造的FileReader。
• FileReader.readAsDataURL() 開始讀取指定的Blob中的內容一旦完成，result屬性中將包含一個data: URL格式的Base64字串以表示所讀取檔案的內容。
• onload週期， 處理load事件。該事件在讀取操作完成時觸發。