如何在React Native中提交文件?

时间:2016-07-31 09:02:18

标签: android reactjs react-native

我正在使用抓取请求,我想提交一个文件和其他数据。我怎么能这样做?
如果使用fetch不可能,那我该怎么办? 谢谢你们。

1 个答案:

答案 0 :(得分:1)

react-native-fs

支持iOS上的文件上传

来自自述文件:

// require the module
var RNFS = require('react-native-fs');

var uploadUrl = 'http://requestb.in/XXXXXXX';  // For testing purposes, go to http://requestb.in/ and create your own link
// create an array of objects of the files you want to upload
var files = [
  {
    name: 'test1',
    filename: 'test1.w4a',
    filepath: RNFS.DocumentDirectoryPath + '/test1.w4a',
    filetype: 'audio/x-m4a'
  }, {
    name: 'test2',
    filename: 'test2.w4a',
    filepath: RNFS.DocumentDirectoryPath + '/test2.w4a',
    filetype: 'audio/x-m4a'
  }
];

var uploadBegin = (response) => {
  var jobId = response.jobId;
  console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);
};

var uploadProgress = (response) => {
  var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100);
  console.log('UPLOAD IS ' + percentage + '% DONE!');
};

// upload files
RNFS.uploadFiles({
    toUrl: uploadUrl,
    files: files,
    method: 'POST',
    headers: {
      'Accept': 'application/json',
    },
    fields: {
      'hello': 'world',
    },
    begin: uploadBegin,
    progress: uploadProgress
  })
  .then((response) => {
    if (response.statusCode == 200) {
      console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body
    } else {
      console.log('SERVER ERROR');
    }
  })
  .catch((err) => {
    if(err.description === "cancelled") {
      // cancelled by user
    }
    console.log(err);
  });