时间戳

首页 > 解决方案 > REACT 使用 window.FileReader 上传多个文件

reactjs - REACT 使用 window.FileReader 上传多个文件

问题描述

我目前已经实现了将单个文件上传到我的 react 应用程序，但是想要上传多个文件，下面是我用来上传单个文件的代码。可以上传多个文件吗？

 captureFile = (event) => {
    const file = event.target.files[0]
    const reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadend = () => {
      this.setState({
        buffer: Buffer(reader.result),
        file: URL.createObjectURL(file),
      })
    }
  }

这就是我目前正在尝试做的事情

  captureFile = (event) => {
    const files = event.target.files
    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      const reader = new window.FileReader()
      reader.readAsArrayBuffer(file)

    reader.onloadend = () => {
      this.setState({
        buffer: Buffer(reader.result),
        file: URL.createObjectURL(file),
      })
    }
  }

标签： reactjsreact-reduxfilereader

解决方案

您可以使用 FileReader 或 UrlObject 来读取图像或文件，如下所示：

    const[selectedFiles,setSelectedFiles] = useState([]);

    captureFile = (event) => {
    let files = [];
    for (let file of event.target.files) {
      files.push(URL.createObjectURL(file));
      }
    setSelectedFiles(files);
   }

然后您可以通过 map 函数遍历 selectedFiles，例如：

   selectedFiles.map((item,key) => (<img key={key} src={item} />));

它适用于我而不是 FileReader，因为它使用回调函数。

推荐阅读