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

【问题标题】：How to Upload Multiple Image Files in a Single Call in Reactjs如何在 Reactjs 中一次调用上传多个图像文件
【发布时间】：2017-07-29 15:04:59
【问题描述】：

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

提前致谢！

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

【问题讨论】：

这是一个 JS/fetch 问题，而不是 React 问题。您需要它们成为一个请求还是只是在寻找一种清理循环逻辑的方法？
我正在寻找循环逻辑完成了。现在改成 JS?Fetch question
@NickMcCurdy 除了 for 循环，如何做到这一点？我希望上传开始并加载器同时更改所有多张图片的值，截至目前，第一张图片的循环上传首先完成，然后开始其他图片。
你是在问如何等到所有图片上传完成？
不，因为在回答代码中我使用了 for 循环，所以第一张图片的上传首先完成，然后开始第二张，然后依此类推。我想像 Facebook 一样实现这样做，如果我们同时上传多张图片，则应该同时开始上传。

标签： reactjs react-native foreach fetch

【解决方案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)
    }

【讨论】：