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

Question

除了多次调用 fetch 来上传多个图像文件(循环遍历文件)的解决方法之外，在前端，如何通过仅调用 fetch/Upload 一次来上传多个图像文件？有人可以吗提供一个简单的例子？就像我们在 Facebook 上所做的那样。

提前致谢!

更新:我已经完成了前端的循环逻辑，现在由于每个上传的图像都有加载器，上传的百分比正在以单个值计算所有图像，如何单独为所有图像分割这个值？

Answer 1

循环逻辑

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)
    }