前端實現圖片或視頻預覽的3種方法

1. 通過上傳服務器實現預覽

上傳服務器是早期經常使用的方法，主要思想就是先把圖片視頻資源，通過ajax請求上傳到服務端，然后服務端返回一個視頻路徑，前端使用這個路徑即可加載出資源并實現預覽。

因為H5之前，前端是沒辦法操作文件的，此方法也是唯一可靠的資源預覽方法。但確實有很多弊端：

預覽前必須先將資源上傳至服務端，如果資源過大，導致上傳時間過長，資源預覽加載時間也過長，影響用戶體驗。

如果用戶只是想預覽，并不上傳，然而資源已經上傳，這就造成內存空間以及網絡資源的浪費。

2. 將資源轉換為base64格式

H5之后，前端有了自己的file對象，終于可以自己操作文件。同時FileReader對象中的readAsDataURL 方法會讀取指定的 Blob 或 File 對象，更是讓我們可以實現純前端的圖片操作。
具體代碼如下：

<input type="file" id="videoInput"> <video src="" alt="預覽" id="video" controls="controls"> <script>const videoInput = document.getElementById('videoInput');videoInput.addEventListener('change', e => {previewByReader(e.target.files[0])})function previewByReader (file) {const fileReader = new FileReader()fileReader.readAsDataURL(file)fileReader.onload = (e) => {console.log(e.target)video.src = e.target.result}} </script>

new一個FileReader實例，我們可以使用實例的readerAsDataURL方法讀取某個文件，讀取完成后通過監聽onload事件，我們我們可以獲取到讀取的結果，一個FileReader對象，它的result屬性就是我們想要的base64格式。

最終設置video元素的src實現預覽：

當然前端轉換base64的方法很多，也可以通過canvas或者其他前端插件來實現都是可以的。

通過blob協議實現預覽

再base64實現預覽中，我特意選擇了一個較大的視頻，實踐過的同學可能也會發現，base64操作需要花費一定時間。如果資源足夠大，將花費較長時間，影響用戶體驗，這就是體現blob協議優點的時候了。
先介紹用法：

<input type="file" id="videoInput"><video src="" alt="預覽" id="video" controls="controls" width="400" height="200"><script>const videoInput = document.getElementById('videoInput');videoInput.addEventListener('change', e => {previewByURL(e.target.files[0])})function previewByURL (file) {video.src = URL.createObjectURL(file)}</script>

可以看到，blob主要是通過URL對象上的createObjectURL方法創建一個地址，直接設置給video.src即可，用法非常簡單，僅需一行代碼。接下來我們看下html重的video.src到底是什么：

可以看到，使用blob協議的一個url，這個 URL 臨時緩存起來，一旦網頁刷新或卸載，這個 URL 就失效。除此之外，也可以手動調用 URL.revokeObjectURL方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);

總結

以上是生活随笔為你收集整理的前端实现图片或视频预览的3种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。