九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

圖片上傳前預(yù)覽，應(yīng)該算是一個普遍的需求，很多時候可能選中的圖片并不是想要的那張，所以需要上傳前預(yù)覽下。

JS（瀏覽器中）是一門特殊的語言，它沒有直接讀寫磁盤文件的權(quán)限，想要操作文件還得配合 <input type="file"/> 標(biāo)簽，而且通過這個標(biāo)簽獲得的 File 對象是只讀的，同時也無法獲取到此文件所在的路徑。那么，該如何顯示預(yù)覽呢？

思路

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

代碼實現(xiàn)

因為使用原生 JS 操作 DOM 過于麻煩，以下示例使用 Vue，但是思路和方法是一樣的！

html 部分示例：

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

script 部分示例：

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

效果展示：

歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處：https://blog.kaguramea.me/arc...