Come caricare file sul server utilizzando react-native

Question

Sto sviluppando un'applicazione in cui ho bisogno di caricare un'immagine sul server. In base all'immagine ottengo una risposta che devo rendere ?.

Potete per favore aiutarmi come caricare un'immagine utilizzando react-native ?.

Answer 1

Sono disponibili un paio di potenziali alternative. In primo luogo, è possibile utilizzare il polyfill XHR:

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

In secondo luogo, chiediamo solo la domanda: come vorrei caricare un file in Obj-C? Rispondilo e poi potresti semplicemente implementare un native module per chiamarlo da JavaScript.

C'è qualche ulteriore discussione su tutto questo sul problema this Github.

Answer 2

Ho scritto qualcosa del genere. Partenza https://github.com/kamilkp/react-native-file-transfer

Answer 3

C'è un caricamento di file integrato in React Native.

Example da Reagire codice nativo:

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!'); 

xhr.open('POST', serverURL); 
xhr.send(body); 

Answer 4

risposta di Tom non ha funzionato per me. Così ho implementato un FilePickerModule nativo che mi aiuta a scegliere il file e quindi a usare il pacchetto react-native-file-transfer di remobile per caricarlo. FilePickerModule restituisce il percorso del file selezionato (FileURL) che viene utilizzato da react-native-file-transfer per caricarlo. Ecco il codice:

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

Answer 5

La mia soluzione sta usando prendere API e formdata.

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