如何使用 Reactjs 从文件输入中预览上传的图像文件？

Question

我正在使用一个名为 dropzone 的插件，它使图像呈现给用户的方式非常接近。

所以我已经这样做了

  <Dropzone
      onDrop={this.handleDropChange}}>
      <p>
        Try dropping some files here, or click to select files to upload.
      </p>
    </Dropzone>



 @observable files = [];
  @action
  handleDropChange = (files) => {
    
    files.forEach(file => {
        this.loadFile(file);
    });
}

  @action
  loadFile(file){
    const reader = new FileReader();
    reader.addEventListener('load',() => {
        runInAction(() => {
            this.files.push({file: file, preview: reader.result,  uploaded: false})
            window.URL.revokeObjectURL(reader.result);
          });
      },false);

    // reader.readAsDataURL(file.fileObject);
  }

      <img src={this.props.preview} />

问题是当我拖入 500 张图像时，它们需要一段时间才能在屏幕上呈现。我认为 reactjs 很难，因为它本质上是重新渲染 500 次，因为每个“文件读取器加载”都会导致一个新项目被放入 files 数组。

是否可以批量处理或先完成所有加载然后重新渲染？

Answer 1

revokeObjectURL 用于对象 url，不适用于其他字符串|urls|base64。
你可以像这样调用URL.createObjectURL来创建一个objectURL：

var url = URL.createObjectURL(file || blob)
var image = new Image()
image.src = url
document.body.appendChild(image)

无需使用 FileReader 并读取所有内容，将其编码为 base64，然后让浏览器将其解码回二进制。太浪费资源了……

当您不再需要该 url 时，应该撤销该 objecturl