ReactJS向Express.js通过multipart/form-data传文件无数据求助

核心问题原因 #

手动指定multipart/form-data的Content-Type会导致浏览器无法自动生成正确的请求边界（boundary），后端multer无法解析请求体，最终导致接收的数据为空。

具体修复步骤 #

1. 修复全局fetchAPI函数 #

当请求体是FormData时，不要手动设置Content-Type，浏览器会自动添加包含正确boundary的请求头。修改后的代码如下：

window.fetchAPI = function(endpoint, method, contentType, body, callback) {
  const cookies = new Cookies();
  var auth = cookies.get("ARToken");
  const headers = {
    'Authorization': 'bearer ' + (auth || '') 
  };
  // 仅当请求体不是FormData时，才设置Content-Type
  if (!(body instanceof FormData) && contentType) {
    headers['Content-Type'] = contentType;
  }
  fetch("http://localhost:3000" + endpoint, {
    method: method,
    headers: headers,
    body: body
  })
  .then((response) => {
    callback(response);
  })
}

2. 调整React端请求调用 #

调用fetchAPI时，无需传入Content-Type参数，直接传递FormData即可：

function setFile(event) {
    var formData = new FormData()
    console.log(event.target.files[0])
    formData.append('someData', "hello")
    formData.append('thumbnail', event.target.files[0])
    // 不传contentType参数，让浏览器自动处理请求头
    window.fetchAPI("/clanak/insert", "POST", undefined, formData, function(data) {
        console.log(data)
    })
}

3. 修正后端打印逻辑 #

upload.single('thumbnail')会将文件信息存入req.file，而非req.thumbnail，普通表单字段存入req.body：

router.post('/insert', upload.single('thumbnail'), function(req, res) {
    console.log('普通字段:', req.body)
    console.log('文件信息:', req.file)
    return res.status(200).json({ body: req.body, file: req.file })
})

4. 额外检查 #

• 确保后端uploads/clanak/目录存在，否则multer会因无法写入文件报错
• body-parser的json和urlencoded中间件不处理multipart/form-data，multer会独立解析该类型请求，无需调整后端中间件顺序

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