圖片預覽 (FileReader/Data URL)

發表於 | 分類於 | |

之前介紹過 Data URL
而這篇文章將補充一個常見的應用場景：圖片預覽

先說明實現圖片預覽的主要流程：

  • 根據 input 元素 來上傳圖片
  • 根據 FileReader 物件來讀取圖片的 Data URL
  • 根據 Data URL 將圖片顯示在畫面上

根據 input 元素 來上傳圖片

內文以 JSX 為範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<label htmlFor="file-upload">
        <input
          id="file-upload"
          accept="image/*"
          multiple={true}
          type="file"
          style={{ display: "none" }}
          onChange={(e) => {
            handleFileInputChange(e);
          }}
        />
        <span>新增圖片</span>
</label>

這裡用了一個小技巧隱藏原本的 input 欄位
並以 label 的點擊來觸發 input 的點擊效果(for 屬性可以觸發相同 id)
備註：JSX 的 for 屬性需要寫成 htmlFor

當選取圖片上傳便會觸發 onChange

根據 FileReader 物件來讀取圖片的 Data URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function handleFileInputChange(event) {
  const files = event.target.files;
  const convertedImages = [];

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();

    reader.onload = function (e) {
      const dataURL = e.target.result;
      convertedImages.push(dataURL);

      if (convertedImages.length === files.length) {
        setPhotoList(convertedImages);
      }
    };

    reader.readAsDataURL(file);
  }
}

基本上就是根據迴圈 搭配 FileReader 讀取每個檔案的 Data URL
並根據 setPhotoList 將轉換好的 URL 陣列放入 photoList 來重新渲染視圖
如果有防呆邏輯也可以在這裡加上(如上傳圖片數量限制等等…)

根據 Data URL 將圖片顯示在畫面上

1
2
3
4
5
{photoList.map((url, index) => {
  return (
    <img key={index} src={url} alt="" />
  );
})}

最後一步很單純
在專案需要的地方將 photoList 給渲染出來就好了

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/07/12/fileReader/

0%