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

我正在使用一个名为的插件，它可以让用户大致了解如何渲染图像

所以我已经这样做了

  <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次

是否需要进行批处理，或者首先进行所有加载，然后重新呈现？

revokeObjectURL用于对象url，而不是用于其他字符串| url | base64。 您可以通过调用URL.createObjectURL创建objectURL，如下所示：

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

---

撤销objecturl应该在您不再需要url时进行，如果他们转到新页面，那么是否仍需要处置createObjectUrl中的资源？特别是如果该页面是SPA，否则将不会在您离开页面时撤销。那么我如何管理它呢。我想，如果我创建了它，然后发布它，这将使它静止。否则，我必须在他们离开该组件后执行此操作，这也意味着我必须保留对该组件的引用

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