前端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)建文件讀取對(duì)象
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));
  };

1. 樣式問題自己調(diào)整即可，只是記錄解決方案
2. 關(guān)于File如何自定義樣式，一般是將file 的padding-top放大，然后外層div固定高度再overflow，就看不到原始標(biāo)簽的"請(qǐng)上傳文件"了，然后內(nèi)部放一個(gè)標(biāo)簽自定義文字即可，當(dāng)然file層級(jí)要在最上面。否則無法點(diǎn)擊觸發(fā)
3. 關(guān)于老版本兼容，請(qǐng)參考鏈接中的onTry函數(shù)。（https://github.com/Pszz/CanvasFilter/blob/master/src/App.vue）