如何在Reactjs中一次调用中上载多个图像文件

除了为多个图像文件上传多次调用fetch（在文件中循环）的解决方法之外，在前端，如何通过只调用fetch/upload一次来上传多个图像文件？有人能提供一个简单的例子吗？就像我们在Facebook上做的一样

提前谢谢

---

更新：我已经完成了前端的循环逻辑，现在每个上传的图像上都有一个加载器，上传的百分比是以单个值计算的，如何将所有图像的这个值分开

循环逻辑

for (let i = 0; i <= e.target.files.length; i++){
      let reader = new FileReader();
      let file = e.target.files[i];
      var self = this
      reader.onloadstart = () => {
        self.setState({ImageUploader: true})
      }
      reader.onloadend = () => {
        var data = reader.result;
        if (!file.type.includes('image')) {
          alert('PLEASE CHOSE A IMAGE BRAH!')
        } else if (file.size / (1024 * 1024) > 5) {
          alert('PLEASE CHOSESmaller Image')
        } else {
          var url = 'https://api......'
          var ifd = new FormData();
          ifd.append('file', file)
          axios({url: url,method: 'put',
            onUploadProgress: function(progressEvent) {
              var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
              self.setState({Completed: percentCompleted})
            },  withCredentials: true, data: ifd}).then((res) => {
            this.setState({ImageUploader: false})
            this.setState({
              image_id: this.state.image_id.concat(res.data.reason.image_id)
            })
          })
          this.setState({
            file: file,
            imagePreviewUrl: this.state.imagePreviewUrl.concat(reader.result),
            noImage: false,
            ImageChoosen: true
          });
        }
      }
      reader.readAsDataURL(file)
    }

for（设i=0；i{
self.setState（{ImageUploader:true}）
}
reader.onloadend=（）=>{
var数据=reader.result；
如果（！file.type.includes（'image'））{
警报（'请选择图像BRAH！'）
}如果（file.size/（1024*1024）>5，则为else{
警报（'请选择较小的图像'）
}否则{
var url='1〕https://api......'
var ifd=new FormData（）；
ifd.append（'file'，file）
axios（{url:url，方法：'put'，
onUploadProgress:函数（progressEvent）{
var percentCompleted=数学轮（（progressEvent.loaded*100）/progressEvent.total）；
self.setState（{Completed:percentCompleted}）
}，其中credentials:true，data:ifd}）。然后（（res）=>{
this.setState（{ImageUploader:false}）
这是我的国家({
image\u id:this.state.image\u id.concat（res.data.reason.image\u id）
})
})
这是我的国家({
档案：档案，
imagePreviewUrl:this.state.imagePreviewUrl.concat（reader.result），
noImage:错，
ImageChoosen：对
});
}
}
reader.readAsDataURL（文件）
}

这是一个JS/fetch问题，而不是React问题。您需要将它们作为一个请求，还是只是在寻找清理循环逻辑的方法？我正在查找循环逻辑，但我已经完成了。现在将其更改为JS？fetchquestion@NickMcCurdy除了for循环外，如何执行此操作？我希望上传到start，并通过loader更改其值对于同一时间的所有多个图像，到目前为止，对于第一个图像的循环上载首先完成，然后对于其他图像开始。您是否询问如何等待，直到所有图像都完成上载？不，正如我在回答代码中使用的循环，因此第一个图像的上载首先完成，然后开始第二个图像，依此类推..我想执行以下操作就像Facebook一样，如果我们同时上传多张图片，所有人的上传应该同时开始。