Pourquoi j'utilise fetch pour uploader img dans reag n'a pas de nom de fichier?

Question

J'utilise chercher pour télécharger des images en réaction, mon code est comme ci-dessous:

let formData = new FormData(); 
    let file = {uri: imgdata, type: 'multipart/form-data', name: '2_resources.jpg'}; 
    formData.append("name", "name"); 
    formData.append("mobile", "18381307123"); 
    formData.append("content", "123654"); 
    formData.append("resources", file,"2_resources.jpg");//mind this line 
    fetch(Config.report, 
     { 
      mode: 'cors', 
      method: "POST", 
      body: formData 
     }) 
     .then(res => res.json()) 
     .then((data) => { 
       console.log(data) 
      } 
     ).catch((err) => { 
      console.log(err) 
     } 
    ); 

mais, exécutez-je obtenir la demande:

J'ai look pour FormData document API sur https://developer.mozilla.org/en-US/docs/Web/API/FormData il ont écrire ci-dessous:

et le fetch est utilisé: "isomorphic-fetch": "^2.2.1"

que dois-je faire pour utiliser récupérer des images? Merci.

Answer 1

Vous ajoutez le fichier à l'objet FormData de façon incorrecte. isomorphic-fetch enveloppe le polyfill de github. En regardant leur docs montre qu'il devrait être:

handleFileUpload(event) { 
    var formData = new FormData(); 
    formData.append('fileName', event.target.files[0]); 
    fetch('http://your-domain/upload', 
    { 
     mode: 'cors', 
     method: 'POST', 
     body: formData 
    }).then(function (response) { 
    console.log('response: ', response); 
    }); 
} 

Le nom du champ sur le serveur sera tout ce que vous utilisez comme la clé lors de l'ajout formData. Dans l'exemple ci-dessus, ce sera 'fileName'. Je ne pense pas non plus que vous ayez besoin de définir vous-même le type de contenu et le nom du fichier. Il devrait être réglé automatiquement.

Dans l'exemple ci-dessus, « événement » est l'événement tiré de l'étiquette d'entrée lorsque l'utilisateur télécharger le fichier:

<input type="file" onChange={this.handleFileUpload}/>