Comment faire pour télécharger plusieurs fichiers image dans un seul appel dans Reactjs

Question

Autre que contournement d'appel chercher plusieurs fois pour le téléchargement de fichiers image multiples (boucle à travers les fichiers), sur Frontend, Comment télécharger plusieurs fichiers image en appelant simplement fetch/Télécharger une fois? Quelqu'un pourrait-il donner un exemple simple? Tout comme nous le faisons sur Facebook.

Merci d'avance!

Mise à jour: J'ai terminé la logique de bouclage à l'avant, maintenant qu'il y a un chargeur sur chaque image téléchargée, Le pourcentage téléchargé est calculé pour toutes les images en valeur unique, comment diviser cette valeur séparément?

Answer 1

Logic Looping

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