前端JS上傳圖片因苹，并預(yù)覽圖片，免后端
HTML代碼
<!-- 上傳標(biāo)簽 -->
<input type="file" id="file"/>
<!-- 圖片標(biāo)簽 - 用于預(yù)覽 -->
<img id="previewImg"/>
JavaScript代碼
// 根據(jù)ID獲取file內(nèi)容
var file = document.getElementById('file').files[0]
// 創(chuàng)建文件讀取對象
var read = new FileReader()
// 讀取成base64
var img64 = read.readAsDataURL(file)
// 賦值給圖片即可
document.getElementById('previewImg').src = img64
// ts 函數(shù)
const getBase64 = (img: any, callback: any) => {
const reader = new FileReader();
reader.readAsDataURL(img);
reader.addEventListener('load', () => callback(reader.result));
};
- 樣式問題自己調(diào)整即可凶杖，只是記錄解決方案
- 關(guān)于File如何自定義樣式智蝠，一般是將file 的padding-top放大奈梳，然后外層div固定高度再overflow，就看不到原始標(biāo)簽的"請上傳文件"了攘须，然后內(nèi)部放一個標(biāo)簽自定義文字即可，當(dāng)然file層級要在最上面叫挟。否則無法點擊觸發(fā)
- 關(guān)于老版本兼容限煞，請參考鏈接中的onTry函數(shù)。（https://github.com/Pszz/CanvasFilter/blob/master/src/App.vue）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
