フロントエンド JS はアップロードされた画像のサムネイルを表示します (ローカル画像の読み取り)

要件:画像を選択した後、画像のアップロード ボタンをクリックすると、バックエンド インターフェイスを要求せずに画像がサムネイルに直接表示されます。

解決策:FileReaderとFileReaderのメソッドを使用しますreadAsDataURL。

最初のステップは、下の図と同様に(アップロード ファイル タグ)
からデータを取得することです。2番目のステップはファイル データを取得し、次のコードを実行します。input[type=“file”]file

// file 是文件数据

// 读取文件
var reader = new FileReader();
// base64位读取
reader.readAsDataURL(file);
reader.onload = function (e) {
    
    
  // 给img标签src复制（结果是base64图片）
  img_src = e.target.result;
}

結果を示す：

選択前に

画像を選択

選択後