JavaScript 實現圖片上傳前本地預覽

圖片上傳前預覽，應該算是一個廣泛的需求，不少時候可能選中的圖片並非想要的那張，因此須要上傳前預覽下。

JS（瀏覽器中）是一門特殊的語言，它沒有直接讀寫磁盤文件的權限，想要操做文件還得配合 <input type="file"/> 標籤，並且經過這個標籤得到的 File 對象是隻讀的，同時也沒法獲取到此文件所在的路徑。那麼，該如何顯示預覽呢？

思路

直接顯示路徑不行，那就將圖片轉化成 data URL 或者說 Base64

代碼實現

由於使用原生 JS 操做 DOM 過於麻煩，如下示例使用 Vue，可是思路和方法是同樣的！

html 部分示例：

<input type="file" @change="fileChange"/>
<img v-if="imgUrl" :src="imgUrl" alt=""/>

script 部分示例：

fileChange(e) {
    // 選中的文件列表，若是設置了多選，length 可能會大於 1
    const fileList = e.target.files;
    if (fileList.length === 0) {
        this.imgUrl = '';
        return;
    }
    const file = fileList[0];
    // 使用 FileReader 讀取文件對象
    const reader = new FileReader();
    // 讀取完畢後獲取結果
    reader.onload = event => {
        this.imgUrl = event.target.result;
    };
    // 把文件對象做爲一個 dataURL 讀入
    reader.readAsDataURL(file);
}

效果展現：

---

歡迎轉載，轉載請註明出處：https://blog.kaguramea.me/arc...