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

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

1 个答案: