使用ReactJS进行多文件上传

Question

我是reactjs的新手，正在尝试上传多个文件。我可以将文件存储在状态组件中作为数组。但当我将数据传递给axios post方法时，它会将文件列表显示为[object FileList]。我无法遍历这些文件进行存储。我甚至尝试了多种上传多个文件的方法，例如'react-Dropzone'。但没什么效果。

我的React代码。

handleChange(event) {
  this.setState({ file: event.target.files })
}

async handleSubmit(e) {
  e.preventDefault()
  let res = await this.uploadFile(this.state.file);
}

async uploadFile(File){
  const formData = new FormData();

  formData.append('image', File)
  axios.post(UPLOAD_ENDPOINT, formData, {
    headers: {
      'content-type': 'multipart/form-data'
    }
  }).then(response => {
    console.log(response.data)
  });
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="file" id="file" multiple name="file" onChange={this.handleChange} />
      <button type="submit" className="btn btn-info"> Update File </button>
    </form>
  )
}

- farooq

Answer 1

这个

event.target.files

将为您提供文件列表，若要将其附加到表单数据中，请使用以下代码。

const files = event.target.files;

for (let i = 0; i < files.length; i++) {
    formData.append(`images[${i}]`, files[i])
}

在服务器端，您将从请求对象/变量的'images'键获取所有图像

- Saud Qureshi

---

简单明了。files 可能是一个常量。 - Jeremy Jones

Answer 2

for (let i = 0; i < files.length; i++) { 
    formdata.append(`images[${i}]`, {
                    uri: pathOfFile,
                    name: fileName.jpg,
                    type: mimeType(eg. "image/jpeg")
    });
}

- Shubham Sharma