Question

我想上传多张图像以发送出去。

我在int中尝试了两种方法，但是handleChange始终为空。我也想知道如何在反应中显示图像

formdata

输入

state = { files: []}

fileChangeHandler = (e) => {
this.setState({ files: e.target.files })
this.setState({ files: [...this.state.files, ...e.target.files] })}


handleSubmit(event) {let fileData = new FormData();
fileData.append('files', this.state.files);
    uploadClaimFile(response.data.id, fileData);}

Answer 1

您可以探索此npm模块React Drop Zone.

Answer 2

不直接修改而追加到state数组的最安全方法是制作该数组的浅表副本，添加新项，然后使用setState替换该数组：

fileChangeHandler = (e) => {
  const files = [...this.state.files]; // Spread syntax creates a shallow copy
  files.push(...e.target.files); // Spread again to push each selected file individually
  this.setState({ files });
}

关于上传文件，当附加到FormData对象时，必须一次附加一个文件：

handleSubmit(event) {
  const fileData = new FormData();
  this.state.files.forEach((file) => fileData.append('files[]', file));
  // ... Submit fileData
}

注意：上传多个文件时，使用[]命名数据符合PHP naming conventions。

编辑

要回答关于显示多个上载文件的最后一个问题，您需要编写一种方法来获取这些文件，创建将它们绑定到文档并显示它们的URL。但是，必须撤消创建的URL，以防止内存泄漏。因此，将它们存储在状态中以跟踪它们可能是一个好主意，因此您可以像这样实现它：

this.state = { files: [], urls: [] };

setFileUrls(files) {
  const urls = files.map((file) => URL.createObjectURL(file));
  if(this.state.urls.length > 0) {
    this.state.urls.forEach((url) => URL.revokeObjectURL(url));
  }
  this.setState({ urls });
}

displayUploadedFiles(urls) {
  return urls.map((url, i) => <img key={i} src={url}/>);
}

在您的setFileUrls处理程序中调用onChange，然后在render方法中调用displayUploadedFiles：

render() {
  return (
    // ... other stuff
    {this.state.urls.length > 0 && 
    <Fragment>{this.displayUploadedFiles(this.state.urls)}</Fragment>
    }
    // ... more stuff
  );
}

多个相邻元素应包装在父元素中，该父元素可以是div或React Fragment。

反应：上传多张图片

2 个答案:

编辑