使用選擇多個圖像 <input type=“file” /> ，更新狀態以存儲圖片網址，動態添加 <img /> 標簽以在reactjs中顯示它們

Question

this.state = {
  imageURL: []
};

fileSelectHandler = (event) => {
  this.setState({
    imageURL: [???]
  });
}

<input type="file" multiple onChange={fileSelectHandler} />
<img src={imageURL[0]} />

在這里，我需要根據所選圖像的數量動態添加多個img標簽。 請幫忙！

Answer 1

關於文件更改，您可以在此處嘗試示例代碼

fileSelectHandler = (e) => {
    Array.from(e.target.files).forEach(file => {
      const reader = new FileReader();
      reader.onload = (e) => {
      this.setState({
        images: this.state.images.concat(e.target.result),
      });
    };
    reader.readAsDataURL(file);
  })
}

演示在這里https://codesandbox.io/s/qxxzz1q11j