前端上傳前預覽文件 image、text、json、video、audio

前天有個需求，上傳前須要校驗視頻長度，而後讓我出個 Demo。

其實預覽功能實現上都差很少，因此今天咱們都來實現一下咯。

選擇文件

通常來講上傳常見的操做就三種，單擊、拖拽、粘貼。下面咱們分別來講一下。

input 選擇文件

咱們沒法獲取用戶本地的內容，須要經過 <input> 標籤，讓用戶本身選取。

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

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

咱們這裏經過 <label for="input"> 來和 <input id="input"> 標籤關聯（label 的 for 和 input 的 id 須要同樣）起來，這樣單擊 <label> 和單擊 <input> 的效果是同樣的，並且 <label> 標籤能夠任意修改。

拖拽文件

以前有在文件上傳中講過。

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

@drop.prevent 是用來捕獲結果的。
@dragover.prevent="dragover = true" 是用來捕獲拖拽移入
@dragleave.prevent="dragover = false" 是用來捕獲拖拽移出

粘貼文件

以前有在文件上傳中講過。

不過這個場景通常在富文本編輯器中比較常見（好比思否的編輯器，粘貼過來圖片會上傳），我們這裏不就講了。

解析文件

音頻&視頻

經過 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

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

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。