使用fetch、FormData与multer上传图片失败的问题求助

问题1：手动设置Content-Type: multipart/form-data导致Boundary not found #

当你手动指定这个请求头时，浏览器不会自动添加boundary分隔符——而multipart/form-data格式必须依赖boundary来分割不同的表单字段，multer正是通过这个boundary来解析文件的，所以会抛出找不到边界的错误。

解决方案：完全不要手动设置Content-Type请求头，当你用fetch发送FormData时，浏览器会自动生成包含正确boundary的请求头（比如你看到的multipart/form-data; boundary=----WebKitFormBoundaryi3lc9wCsnhrvAOAB），这样multer就能正常解析表单数据了。

问题2：移除Header后请求无法进入路由处理逻辑 #

这是几个细节配置不匹配导致的，逐个排查修复：

1. 表单字段名不匹配

你的前端代码中，FormData添加的字段是images[]：

formData.append('images[]', files[i], files[i].name);

但后端multer配置的是监听images字段：

upload.array('images')

multer会严格按照你指定的字段名去解析文件，两者不匹配的话，multer无法识别上传的文件，甚至会因为解析失败导致请求无法进入路由处理函数。

修复：统一字段名，把前端的images[]改成images：

formData.append('images', files[i], files[i].name);

（或者后端改成upload.array('images[]')，推荐前者，更符合multer的常规用法）

2. CORS跨域配置缺失

你的前端运行在localhost:3000，后端在localhost:8080，属于跨域请求。如果后端没有配置CORS，浏览器会拦截请求，导致请求根本无法到达后端路由。

解决方案：在express中添加CORS中间件
首先安装cors包：

npm install cors

然后在你的express主文件中配置：

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

// 开发环境允许所有跨域请求，生产环境建议限制指定来源
app.use(cors());

// 挂载你的图片上传路由
app.use('/image', require('./controllers/imageController'));

3. 上传目录不存在

你的multer配置中指定了dest: __dirname + '/uploads/images'，如果这个目录不存在，multer会抛出文件写入错误，导致请求失败。

解决方案：确保目录存在
可以手动创建uploads/images目录，或者在代码中用fs模块自动创建：

const fs = require('fs');
const uploadDir = __dirname + '/uploads/images';
if (!fs.existsSync(uploadDir)) {
  // recursive: true 会自动创建多级目录
  fs.mkdirSync(uploadDir, { recursive: true });
}

const upload = multer({ dest: uploadDir });

最终验证调整后的代码 #

前端fetch请求（保持不变，不设置Content-Type）

upload: async function(formData) {
  return fetch('http://localhost:8080/image/upload', {
    method: 'post',
    body: formData
  })
}

前端FormData处理（修正字段名）

handleChange = event => {
  if(event.target.type === 'file') {
    const files = event.target.files;
    var formData = new FormData();
    for(var i = 0; i < files.length; i++) {
      formData.append('images', files[i], files[i].name);
    }
    Image.upload(formData);
  }
};

后端控制器（修正字段名+确保目录存在）

const express = require('express');
const router = express.Router();
const multer = require('multer');
const fs = require('fs');

const uploadDir = __dirname + '/uploads/images';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

const upload = multer({dest: uploadDir});

router.post('/upload', upload.array('images'), (req, res) => {
  console.log('上传的文件列表:', req.files);
  console.log('表单其他数据:', req.body);
  return res.sendStatus(200);
});

module.exports = router;

完成以上调整后，应该就能正常接收文件上传请求了。

内容的提问来源于stack exchange，提问作者Janus