React Fetch POST请求报Multipart: Boundary not found错误，Postman可正常运行

问题原因 #

你当前代码中向FormData添加image时传入的是自定义对象{uri, type, name}，这种格式无法被fetch正确识别为文件类型，导致FormData无法自动生成正确的multipart boundary标识，服务器端因此无法解析请求。

解决方案 #

1. 前端修正：将图片URI转换为Blob对象（React Native环境） #

在React Native中，需先把图片URI转换为Blob，再添加到FormData中，这样fetch才能正确处理multipart请求并自动生成boundary。

修改代码如下：

// 新增URI转Blob的工具函数
const uriToBlob = async (uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  return blob;
};

const handleFileUpload = async () => {
  if (!selectedFile) {
    Alert.alert('Ошибка', 'Выберите файл для загрузки');
    return;
  }

  try {
    const formData = new FormData();
    // 将图片URI转为Blob后添加到FormData
    const imageBlob = await uriToBlob(selectedFile.uri);
    formData.append('image', imageBlob, selectedFile.fileName || 'image.png');
    formData.append('title', newImageTitleFile);
    formData.append('description', newImageDescriptionFile);

    const response = await fetch('http://localhost:5000/api/images/upload', {
      method: 'POST',
      body: formData,
      // 无需手动设置Content-Type，fetch会自动添加带boundary的头
    });

    if (!response.ok) {
      throw new Error('Ошибка загрузки файла');
    }

    const data = await response.json();
    console.log('Загружено:', data);
  } catch (error) {
    console.error('Ошибка:', error);
  }
};

2. 后端确认：正确配置multer中间件（Express环境） #

确保服务器端使用multer处理multipart请求，配置示例：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer存储路径，可自定义
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads'); // 确保uploads目录存在
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

// 处理上传请求，指定字段名为'image'
app.post('/api/images/upload', upload.single('image'), (req, res) => {
  // req.file是上传的图片文件，req.body包含title和description
  if (!req.file) {
    return res.status(400).json({ error: '未上传图片' });
  }
  res.json({
    message: '上传成功',
    image: req.file,
    title: req.body.title,
    description: req.body.description
  });
});

app.listen(5000, () => console.log('服务器运行在5000端口'));

额外检查点 #

• 确保selectedFile的uri格式正确（React Native中iOS为file://开头，Android可能为content://，上述uriToBlob函数可兼容两种格式）
• 确认服务器端的uploads目录已创建，且有读写权限
• 若存在CORS问题，需在Express中添加cors中间件：

  const cors = require('cors');
  app.use(cors());
  

内容的提问来源于stack exchange，提问作者Тимур Агаев