Question

我正在尝试在我的应用上实施Dropzone，但如果它们作为多重输入而丢弃，则无法预览照片。如果我逐个添加它们，它可以正常工作但如果我选择多个只有第一个被渲染。

这是我的onDrop功能

onDropGeneral = (currentGeneralPhoto) => {
 let index;
 for (index = 0; index < currentGeneralPhoto.length; ++index) {
  const file = currentGeneralPhoto[index];
  this.setState({
    previewGeneralPhotos: this.state.previewGeneralPhotos.concat(file)
  });
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (event) => {
    console.log('URL: ', event.target.result);
    this.setState({
      generalPhotos: this.state.generalPhotos.concat([{ base64: event.target.result }])
    });
  };
 }
}

这是我的渲染方法：

<h2>Dropped files</h2>
{this.state.previewGeneralPhotos.length > 0 ? <div>
  <h2>Preview {this.state.previewGeneralPhotos.length} files...</h2>
  <div>{this.state.previewGeneralPhotos.map((file) => <img src={file.preview} alt="preview failed" />)}</div>
 </div> : null}
 <h2> Upload {this.state.generalPhotos.length} Files </h2>

上传计数显示数组的正确大小，但预览计数仅计算第一张照片已删除

Answer 1

所以你的问题是因为setState可以是异步的。您应该在setState函数中使用onDropGeneral的函数回调，如下所示：

this.setState(({ previewGeneralPhotos }) => ({
  previewGeneralPhotos: previewGeneralPhotos.concat(file)
}))

这样可以确保您不会意外覆盖previewGeneralPhotos之前的值，并且实际上是按照您的意愿添加到现有数组中。

其他一些建议：

确保您的img元素有密钥。
我会在整个Component上使用文件阅读器的实例，而不是每次调用onDropGeneral方法时都创建一个新实例。你可以附加一个事件监听器来加载＆＃39; componentDidMount中的事件，并在componentWillUnmount中删除该侦听器。至少，最好在调用reader.readAsDataURL之前附加该事件监听器。

使用react-dropzone预览多个drop

1 个答案: