如何使用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 
})