選擇檔案

一般來說上傳常見的操作就三種，單擊、拖拽、貼上。下面我們分別來說一下。

input 選擇檔案

我們無法獲取使用者本地的內容，需要通過<input>標籤，讓使用者自己選取。

<input type="file" name="input" id="input" @change="inputHandler">

但是<input>標籤有個弊端：樣式無法自定義（效果很奇怪）。

我們這裡通過<label for="input">來和<input id="input">標籤關聯（label 的 for 和 input 的 id 需要一樣

拖拽檔案

之前有在檔案上傳中講過。

<label for="input" class="upload-wrap" 
    :class="{'upload-wrap--hover': dragover}"
    @drop.prevent="onDrop"
    @dragover.prevent="dragover = true"
    @dragleave.prevent="dragover = false">

@drop.prevent是用來捕獲結果

貼上檔案

不過這個場景一般在富文字編輯器中比較常見（比如思否的編輯器，貼上過來圖片會上傳），咱們這裡不就講了。

https://www.51220.cn 51220網站目錄

解析檔案

音訊&視訊

通過URL.createObjectURL生成一個可訪問的地址。
然後通過audio、video解析這個資源，需要在onloadedmetadata回撥裡面再獲取。

var file = el.files[0];
var
 
 video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.onloadedmetadata = function(){
    console.log('長度', video.duration, 's')
}

圖片

通過URL.createObjectURL生成一個可訪問的地址。
然後通過img解析這個資源，需要在onload回撥裡面再獲取。

var file = el.files[0];
var img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.onload = function(){
    console.log('寬高', img.naturalWidth, img.naturalHeight)
}

文字

文字的話直接用FileReader就能讀取。

var fileReader = new FileReader();
fileReader.readAsText(file)
fileReader.onload = () => {
    console.log(fileReader.result)
}

其他型別

1. excel 有對應庫js-xlsx.js
2. pdf 有對應庫pdf.js

有需求再說吧，目前的應該也滿足業務要求了。