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以及用于解析multipart / form-data的express-formidable包。

任何帮助将不胜感激！我也花了很多时间在我正在使用的每个软件包的问题跟踪器上，似乎找不到什么问题。

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知道如何将给定路径转换为多部分请求。

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

1 个答案: