web-dev-qa-db-fra.com

Comment télécharger une image sur le serveur à l'aide de React Native

Je définis les en-têtes et le corps, Utilisation de la récupération avec la publication pour télécharger l'image sur le serveur.Je reçois le code de réponse 200 mais il ne télécharge pas l'image mais le reste des données est téléchargé.

Voici le code du corps:

export default function setRequestBody(imagePath){

    let boundry = "----WebKitFormBoundaryIOASRrUAgzuadr8l";

    let body = new FormData();

    body.append("--"+boundry+"\r\n");
    body.append("Content-Disposition: form-data; name=imageCaption\r\n\r\n");
    body.append("Caption"+"\r\n");
    body.append("--"+boundry+"\r\n");
    body.append("Content-Disposition: form-data; name=imageFormKey; filename =iimageName.pngg \r\n");
    body.append("Content-Type: image/png \r\n\r\n");
    body.append({uri : imagePath});
    // appened image Data Here
    body.append("\r\n");
    body.append("--"+boundry+"--\r\n");
    return body

}

Aidez-moi, quelle erreur je fais. :(

androidiosreactjsreact-native
9
Rajeev Upadhyay

J'ai trouvé la solution:

let body = new FormData();
body.append('photo', {uri: imagePath,name: 'photo.png',filename :'imageName.png',type: 'image/png'});
    body.append('Content-Type', 'image/png');

fetch(Url,{ method: 'POST',headers:{  
     "Content-Type": "multipart/form-data",
     "otherHeader": "foo",
     } , body :body} )
  .then((res) => checkStatus(res))
  .then((res) => res.json())
  .then((res) => { console.log("response" +JSON.stringify(res)); })
  .catch((e) => console.log(e))
  .done()

** le nom de fichier est facultatif ...

9
Rajeev Upadhyay

Le problème est body.append({uri : imagePath}); car le JSC natif réactif ne prend pas en charge les fichiers et les objets blob, vous devez donc utiliser des bibliothèques.

react-native-fetch-blob a un très bon support pour cela, exemple de son README.md

    RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
        Authorization : "Bearer access-token",
        otherHeader : "foo",
        'Content-Type' : 'multipart/form-data',
    }, [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
    // custom content type
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
      mail : '[email protected]',
      tel : '12345678'
    })},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })
4
Ven Jest