如何在 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)
    }

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

How to Upload Multiple Image Files in a Single Call in Reactjs

foreach

fetch

reactjs

react-native