将 React Native 中的照片上传到节点服务器

Question

尝试使用名为“react-native-fetch-blob”的 React 库上传本地资产（简单的 jpeg 文件）。我的服务器正在记录请求，但是无论我尝试什么，req.body 要么是空的，要么是未定义的。

我已尝试将文件作为“base64”编码字符串上传，但还是没有成功。

我也知道我的 uri 是有效的。

前端代码：

 RNFetchBlob.fetch('POST', 'http://localhost:3000/api/analyze', {
      'Content-Type': 'multipart/form-data'
    }, RNFetchBlob.wrap(this.state.imgSource.uri))
    .then( res => {
      console.log('success:', res);
    })
    .catch( err => {
      console.log('error:', err);
    })

我在后端使用 express 以及 express-formidable 包来解析 multipart/form-data。

任何帮助将不胜感激！我也花了很多时间在问题跟踪器中为我正在使用的每个包，似乎找不到哪里出了问题。

Answer 1

尝试使用原生的fetch API 和FormData 对象。类似的东西：

  const postImage = (imagePath) => {
    const photo = {
      uri: imagePath,
      name: 'image.jpg',
      type: 'image/jpeg',
    };
    const data = new FormData();
    data.append('file', photo);
    const config = {
      method: 'POST',
      body: data,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };
    return fetch("https://your.endpoint/img", config);
  }

  postImage(pathToYourFile)
    .then(resp => resp.json())
    .then(json => console.log(json))
    .catch(err => console.log(err))

这样 React Native 就知道如何将给定的路径转换为多部分请求。