Comment télécharger des fichiers vers le serveur à l'aide de réagir indigènes

Je développe une application, où j'ai besoin de télécharger une image sur le serveur. Basé sur l'image que j'ai d'obtenir une réponse, qui je dois rendre?.

Pouvez-vous s'il vous plaît aider moi comment faire pour télécharger une image à l'aide de réagir indigènes?.

InformationsquelleAutor manjunath24242424 | 2015-04-07
  1. 40

    Il y a transfert de fichier intégré à Réagir Natif.

    Exemple de Réagir en code Natif:

    var photo = {
    uri: uriFromCameraRoll,
    type: 'image/jpeg',
    name: 'photo.jpg',
};

var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');

var xhr = new XMLHttpRequest();
xhr.open('POST', serverURL);
xhr.send(body);
    • Je suis en train de faire quelque chose de similaire à l'aide d'axios.. .le serveur est les méta-données, mais pas le fichier réel. Comment 'uriFromCameraRoll' en fait de les convertir dans le fichier en tant que partie de la send?
    • xhr ne fait pas partie de l'réagissent api native, cela me donne une xhr is not defined erreur
    • essayez: var xhr = new XMLHttpRequest(); facebook.github.io/réagir indigènes/docs/...
    • Merci! J'ai été la recherche de quelques heures...
    InformationsquelleAutor Dev01
  2. 13

    Ma solution est d'utiliser fetch API et FormData.

    Testé sur Android. 

    const file = {
  uri,             //e.g. 'file:///path/to/file/image123.jpg'
  name,            //e.g. 'image123.jpg',
  type             //e.g. 'image/jpg'
}

const body = new FormData()
body.append('file', file)

fetch(url, {
  method: 'POST',
  body
})
    • Il n'y a pas de progrès dans fetch 🙁
    InformationsquelleAutor Patrik Prevuznak
  3. 6

    J'ai écrit quelque chose comme ça. Découvrez https://github.com/kamilkp/react-native-file-transfer

    InformationsquelleAutor kamilkp
  4. 0

    Un couple de solutions de rechange potentielles sont disponibles. Tout d'abord, vous pouvez utiliser le XHR polyfill:

    http://facebook.github.io/react-native/docs/network.html

    Deuxièmement, il suffit de poser la question: comment puis-je télécharger un fichier en Obj-C? Réponse et ensuite, vous pouvez simplement mettre en œuvre un le module natif de l'appeler à partir de JavaScript.

    Il y a une discussion plus approfondie sur tous les de ce sur cette Github question.

    InformationsquelleAutor Colin Ramsay
  5. 0

    Tom réponse n'a pas fonctionné pour moi. J'ai donc mis en place un natif FilePickerModule qui m'aide à choisir le fichier, puis utilisez la remobile de réagir-natif de transfert de fichier de package à télécharger. FilePickerModule retourne le chemin du fichier sélectionné (FileURL) qui est utilisé par réagissent-natif de transfert de fichier pour le télécharger.
    Voici le code:

    var FileTransfer = require('@remobile/react-native-file-transfer');
var FilePickerModule = NativeModules.FilePickerModule;

      var that = this;
      var fileTransfer = new FileTransfer();
      FilePickerModule.chooseFile()
      .then(function(fileURL){
        var options = {};
        options.fileKey = 'file';
        options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
        options.mimeType = 'text/plain';
        var headers = {
          'X-XSRF-TOKEN':that.state.token
        };
        options.headers = headers;
        var url = "Set the URL here" ;
        fileTransfer.upload(fileURL, encodeURI(url),(result)=>
        {
              console.log(result);
          }, (error)=>{
              console.log(error);
          }, options);
     })
    InformationsquelleAutor Abhishek Nalin
  6. 0

    Il suffit de construire sur le réponse par Dev1, c'est une bonne façon de télécharger des fichiers à partir de réagir natif si vous aussi vous voulez afficher la progression du téléchargement. C'est de la pure JS, donc cela devrait fonctionner sur n'importe quel fichier Javascript.

    (À noter que dans l'étape #4, vous avez à remplacer les variables à l'intérieur des chaînes avec le type de fichier et de terminaisons. Cela dit, vous pouvez simplement prendre ces champs out.)

    Voici un résumé que j'ai mis sur Github: https://gist.github.com/nandorojo/c641c176a053a9ab43462c6da1553a1b

    1. pour le téléchargement d'un fichier:

    
//1. initialize request
const xhr = new XMLHttpRequest();
//2. open request
xhr.open('POST', uploadUrl);
//3. set up callback for request
xhr.onload = () => {
    const response = JSON.parse(xhr.response);

    console.log(response);
    //... do something with the successful response
};
//4. catch for request error
xhr.onerror = e => {
    console.log(e, 'upload failed');
};
//4. catch for request timeout
xhr.ontimeout = e => {
    console.log(e, 'cloudinary timeout');
};
//4. create formData to upload
const formData = new FormData();

formData.append('file', {
    uri: 'some-file-path',          //this is the path to your file. see Expo ImagePicker or React Native ImagePicker
    type: `${type}/${fileEnding}`,  //example: image/jpg
    name: `upload.${fileEnding}`    //example: upload.jpg
});
//6. upload the request
xhr.send(formData);
//7. track upload progress
if (xhr.upload) {
    //track the upload progress
    xhr.upload.onprogress = ({ total, loaded }) => {
        const uploadProgress = (loaded /total);
        console.log(uploadProgress);
    };
}

    2. le téléchargement de plusieurs fichiers
    En supposant que vous avez un tableau de fichiers que vous souhaitez télécharger, vous devriez juste changer #4 dans le code ci-dessus pour ressembler à ceci:

    
//4. create formData to upload
const arrayOfFilesToUpload = [
    //...
];
const formData = new FormData();

arrayOfFilesToUpload.forEach(file => {
    formData.append('file', {
        uri: file.uri,                  //this is the path to your file. see Expo ImagePicker or React Native ImagePicker
        type: `${type}/${fileEnding}`,  //example: image/jpg
        name: `upload.${fileEnding}`    //example: upload.jpg
    });
})
    InformationsquelleAutor Nando