从手机中选择文档文件并上传到服务器

时间:2017-06-29 15:44:57

标签: node.js reactjs react-native react-native-fetch-blob

我试图在按下按钮时从手机存储中获取文档文件,然后上传服务器。但我不知道使用哪个库以及如何使用它。

1 个答案:

答案 0 :(得分:0)

如果您愿意使用库,则可以使用React-native-fetch-blob或axios。

如果是React-native-fetch-blob,你可以这样做:

RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
    Authorization : "Bearer access-token",
    otherHeader : "foo",
    'Content-Type' : 'multipart/form-data',
  }, [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
    // custom content type
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
      mail : 'example@example.com',
      tel : '12345678'
    })},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })

您将设法从RNFS甚至RNFetch blob等库中获取文件路径。

https://github.com/wkh237/react-native-fetch-blob

您也可以使用axios(https://github.com/mzabriskie/axios),但我不使用它,所以我无法再帮助您了。

两者之间的区别在于他们发送数据的方式。 RNFB使用fetch api并使用native来获取Base64编码,axios适用于XMLHttpRequests,这更有可能在Internet浏览器中使用。

希望它有所帮助。