时间戳

首页 > 解决方案 > 使用 nodeJS (Multer) 传递 formData 上传图片 -> 'react-native-image-crop-picker'

react-native - 使用 nodeJS (Multer) 传递 formData 上传图片 -> 'react-native-image-crop-picker'

问题描述

当我想使用 MULTER 将文件从客户端移动设备上传到我的后端 (NodeJS) 时，我目前遇到了一个问题。

我正在使用“react-native-image-crop-picker”来选择设备上的图像（从库或相机中）

我已经使用 formData 将响应作为文件发送到后端，但 req 文件仍然未定义。

我的前端代码：

let response = await ImagePicker.openCamera({
    height: 400,
    width: 400,
    cropping: true,
  });<br>
  let media = {
    uri: response.path,
    type: response.mime,
    name: response.filename,
  };<br>
  let form = new FormData();
  form.append('uploads', media);<br>
  if (form !== null) {<br>
    await Axios({
      method: 'POST',
      url: url,
      data: form,<br>
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })

我的后端：

   router.post('/article', upload.single('uploads'), async (req, 
   res) => 
   {<br>
      try {
       console.log(req.file);
 } <br>catch (err) {
   console.log(err.message);<br>
  res.status(500).send('SERVOR ERROR');
 }
  });

前端

后端

console.log(req.file) = "未定义"

标签： react-nativemulterform-data

解决方案

我曾经尝试使用 fs.readFile ：

  let d = {};
  let e = await Fs.readFile(response.path, 'base64');
  let form = new FormData();
  form.append('uploads', e);
  d.uploads = form;
  let config = {'Content-Type': 'multipart/form-data'};
  Axios.post(url, d, config)
    .then((res) => console.log(res))
    .catch((err) => console.error(err));
}

req.file 仍然未定义，但 req.body 显示：

req.file => undefined
req.body => { uploads: { _parts: [ [Array] ] } }

推荐阅读