如何使用react-native將文件上載到服務器

Question

我正在開發一個應用程序，我需要將圖像上載到服務器。基於圖像我得到了我需要呈現的迴應？

你能幫我怎麼用react-native？上傳圖片嗎？

Answer 1

有幾種潛在的替代品可供選擇。首先，你可以使用XHR填充工具：

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

其次，只問了一個問題：我如何上傳的OBJ-C文件？回答這個問題，然後你可以實現一個native module來從JavaScript調用它。

關於this Github的所有問題，還有一些討論。

Answer 2

我寫過類似的東西。退房https://github.com/kamilkp/react-native-file-transfer

Answer 3

在React Native中內置了文件上傳功能。

Example從陣營本地代碼：

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

湯姆的回答並沒有爲我工作。所以我實現了一個本地FilePickerModule，它可以幫助我選擇文件，然後使用remobile的react-native-file-transfer包來上傳它。 FilePickerModule返回所選文件（FileURL）的路徑，它被react-native-file-transfer用於上載它。 下面的代碼：

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

我的解決方案是使用獲取API和FORMDATA。

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