React使用Fetch上传图片至Spring后端报错求助

兄弟，我一眼就揪出你代码里的两个关键问题了，这就是导致Required request part 'file' is not present报错的根源：

1. 错误地将FormData转为JSON字符串 #

FormData是专门为multipart/form-data类型请求设计的对象，你用JSON.stringify(formData)把它转成JSON后，后端完全无法识别里面的文件和表单字段结构，自然找不到名为file的请求部分。

2. 手动设置了Content-Type: multipart/form-data #

当你用fetch发送FormData作为请求体时，浏览器会自动帮你生成正确的Content-Type头，包括必不可少的boundary分隔符。如果手动设置这个头，反而会丢失boundary信息，后端无法正确解析multipart格式的请求。

修正后的代码如下 #

const formID = document.getElementById('formGroup');
const formData = new FormData(formID);
fetch('api/5/add-image', {
  method: 'POST',
  body: formData, // 直接传递FormData对象，不要转JSON
  headers: {
    Authorization: 'Bearer ' + token,
    Accept: 'application/json'
    // 删掉手动设置的Content-Type，交给浏览器自动处理
  }
}).then(res => {
  this.setState({ isSubmitting: false });
  return res.text(); // 需要return才能在后续then中获取返回内容
}).then(text => {
  console.log(text);
}).catch(err => {
  console.error('请求出错:', err);
  this.setState({ isSubmitting: false });
});

额外注意事项 #

• 确保你表单里的文件上传字段name属性确实是file，比如<input type="file" name="file" />，如果名称和后端要求的不一致，也会报找不到的错误。
• 建议给form元素加上enctype="multipart/form-data"属性，虽然用FormData时不是强制要求，但能避免一些潜在的解析问题。

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