React Native向Node.js后端上传图片失败问题求助

问题现象 #

Postman发送POST请求可正常上传图片到Node.js后端，但React Native代码实现时出现异常，无法完成上传。

问题排查与修复方案 #

1. 修复请求封装的参数传递 #

你当前把formData包裹在对象里传递给kirim_pengaduan，这会导致请求body变成包含formData属性的JSON对象，而非纯FormData结构，后端无法解析。

修改方式：
直接将FormData作为请求body传递，而非包裹在对象中：

// 原代码
kirim_pengaduan({ formData })

// 修改后
kirim_pengaduan(formData)

// 若请求封装需要配置项，应这样传
kirim_pengaduan({
  method: 'POST',
  body: formData
})

2. 禁止手动设置Content-Type头 #

如果kirim_pengaduan封装里手动设置了'Content-Type': 'multipart/form-data'，必须删除。multipart/form-data请求需要自动生成的boundary分隔符，手动设置会丢失该信息，导致后端无法解析表单数据。

正确做法是不设置Content-Type，fetch会自动根据FormData生成带boundary的合法请求头。

3. 处理跨平台URI兼容性 #

iOS和Android的图片URI格式存在差异：

• iOS：file:///var/mobile/...
• Android：content://media/external/images/media/...

部分后端无法直接解析Android的content://格式URI，需做兼容处理：

import { Platform } from 'react-native';

// 在FormData.append前处理URI
const imageAsset = foto.assets[0];
const uri = Platform.OS === 'android' 
  ? imageAsset.uri 
  : imageAsset.uri.replace('file://', '');

formData.append('file', {
  uri: uri,
  type: imageAsset.type || 'image/jpeg', // 兜底设置图片类型
  name: imageAsset.fileName || `upload-${Date.now()}.jpg` // 兜底文件名
});

4. 对齐Postman的字段名 #

确保代码中FormData的字段名（如'file'）和Postman中使用的字段名完全一致。如果Postman里用的是'foto'，代码里也要同步改为formData.append('foto', ...)。

5. 验证后端解析逻辑 #

确认Node.js后端使用正确的中间件解析multipart/form-data，比如用multer：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

// 确保字段名和前端一致（这里是'file'）
app.post('/pengaduan', upload.single('file'), (req, res) => {
  console.log('表单字段:', req.body);
  console.log('上传文件:', req.file);
  // 后续处理逻辑
});

6. 打印FormData对比Postman #

可以遍历FormData查看内容，对比Postman的请求体，确认所有参数一致：

// 遍历FormData打印所有字段
for (let pair of formData.entries()) {
  console.log(`${pair[0]}:`, pair[1]);
}

完整修复示例代码 #

import { Platform } from 'react-native';

const handlekirimPengaduan = () => {
  const formData = new FormData();
  formData.append(
    'id_pengaduan',
    `${today.getFullYear()}${today.getHours()}${today.getMinutes()}${today.getSeconds()}`,
  );
  formData.append('nik', nik.toString());
  formData.append('jdl_laporan', jdlLaporan);
  formData.append('isi_laporan', isiLaporan);
  formData.append('tgl_pengaduan', Today);

  // 处理图片URI兼容性
  const imageAsset = foto.assets[0];
  const uri = Platform.OS === 'android' ? imageAsset.uri : imageAsset.uri.replace('file://', '');
  
  formData.append('file', {
    uri: uri,
    type: imageAsset.type || 'image/jpeg',
    name: imageAsset.fileName || `upload-${Date.now()}.jpg`,
  });

  // 直接用fetch发送请求（也可替换为你的kirim_pengaduan封装）
  fetch('你的后端接口地址', {
    method: 'POST',
    body: formData
  })
    .then(res => res.json())
    .then(result => {
      console.log('result:', result);
      if (result.status === 200) {
        alert('Laporan Anda Berhasil Dibuat, Silahkan menunggu info selanjutnya');
        navigation.replace('Home');
      } else {
        alert(result.msg);
      }
    })
    .catch(err => {
      console.error('上传错误:', err);
      alert('上传失败，请重试');
    });
};

内容的提问来源于stack exchange，提问作者Ahmad Reza A