无法使用 expo-camera takePictureAsync 方法向 node.js 后端服务器发出图像请求

Question

我正在努力在 React Native 上使用 expo 相机拍照并将缓存图像发送到我的 node.js 后端服务器，然后我的后端服务器将其附加到一个 formdata 对象并将其发送到我的网络服务。我搜索了很多关于我的前端和后端之间的操作，但找不到确切的答案。

我的 express-node 后端服务器使用 multer 获取图像。

我有一个像下面这样的本机前端代码，以便发送我作为 expo-camera 的 takePictureAsync 方法的返回对象获得的图像数据：

客户端


//react native client side
 const takePicture = async () => {
   if (cameraRef.current) {
     const options = { quality: 0.5, base64: true, skipProcessing: true };
     const data = await cameraRef.current.takePictureAsync(options);
     const source = data.uri;

     if (source) {
       await cameraRef.current.pausePreview();
       setIsPreview(true);
       uploadFile(source);
       console.log('picture source', source);
     }
   }
 };

然后当我尝试使用 axios 将下面的图像数据发送到我的 node.js 后端服务器时，我的后端收到 404 状态错误：


//react native client side
    async function uploadFile(photo) {
    const formData = new FormData();

    formData.append('file', {
      uri: photo,
      name: 'test',
      mimetype: 'image/jpeg',
    });

    await axios
      .post('http://MyLocalIpAdress:3000/photo-upload', formData, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((res) => {
        console.log(res.data);
        return res.data;
      });
  }

服务器端

我的 Node.js 后端端点如下：


router.post(
  '/photo-upload',
  multer({ storage: multer.memoryStorage() }).single('file'),
  async (req, res) => {
    if (req.file) {
      try {
        // Transfers uploaded image through webservice
        const form = new FormData();
        form.append('file', req.file.buffer, {
          contentType: req.file.mimetype,
          filename: req.file.originalname,
        });

        res.status(200).send({
          message: 'Success'
        });
      } catch (err) {
        res.status(500).send({
          message: `Could not upload the file: ${req.file.originalname}. ${err}`,
        });
      }
    } else {
      return res.status(400).send({ message: 'Please upload a file!' });
    }
  })

我不知道是服务器端还是客户端做错了以及方法。

Answer 1

我在使用 formData 将图像数据发送到后端时遇到了同样的问题。有几个技巧可以解决这个问题：

解决方案一：

const formdata = new FormData();
formdata.append('image[]', {
          name: 'test',
          type: imageurl?.type,
          uri:
            Platform.OS !== 'android'
              ? 'file://' + photo
              : photo,
        });
const res = await axios.post('http://MyLocalIpAdress:3000/photo-upload', formdata, {
        headers: {
          Accept: '*/*',
          'Content-type': 'multipart/form-data',
        },
      });

方案二：（个人选择）是用库上传数据。 rn-fetch-blob 是我用来解决这个问题的东西。如果您打算使用它，请阅读文档并实施它。

   RNFetchBlob.fetch('POST', 'http://MyLocalIpAdress:3000/photo-upload', 
      {
        Authorization : "Bearer access-token",
        '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) => {
    // ...
  })

无法使用 expo-camera takePictureAsync 方法向 node.js 后端服务器发出图像请求

Cannot make a request of image with expo-camera takePictureAsync method to node.js backend server

node.js

multer

react-native

axios

expo