web-dev-qa-db-fra.com

Téléchargement de fichiers multiples avec reactjs

Je suis nouveau dans reactjs et j'essaie de télécharger plusieurs fichiers. Je peux en mesure de stocker les fichiers dans le composant d'état en tant que tableau. Mais lorsque je passe les données à la méthode axios post, cela me donne la liste des fichiers sous la forme [object FileList]. Et je ne pouvais pas parcourir ces fichiers à stocker. Même j'ai essayé plusieurs méthodes pour télécharger plusieurs fichiers comme "react-Dropzone". Mais n'a pas aidé.

Mon code de réaction.

handleChange(event) {
  this.setState({ file: event.target.files })
}

async handleSubmit(e) {
  e.preventDefault()
  let res = await this.uploadFile(this.state.file);
}

async uploadFile(File){
  const formData = new FormData();

  formData.append('image', File)
  axios.post(UPLOAD_ENDPOINT, formData, {
    headers: {
      'content-type': 'multipart/form-data'
    }
  }).then(response => {
    console.log(response.data)
  });
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="file" id="file" multiple name="file" onChange={this.handleChange} />
      <button type="submit" className="btn btn-info"> Update File </button>
    </form>
  )
}
reactjsreact-nativereact-routermultiple-file-upload
4
farooq

Le

event.target.files

Vous donnera une liste de fichiers et pour l'ajouter aux données de formulaire, utilisez le code suivant.

let files = event.target.files;

for (let i = 0; i < files.length; i++) {
    formData.append(`images[${i}]`, files[i])
}

Du côté serveur, vous obtiendrez toutes les images de 'images' clé de l'objet/variable de la requête

1
Saud Qureshi
for (let i = 0; i < files.length; i++) { 
    formdata.append(`images[${i}]`, {
                    uri: pathOfFile,
                    name: fileName.jpg,
                    type: mimeType(eg. "image/jpeg")
    });
}
1
shubham