React状态变量中表单图片如何发送至Django后端？

问题根源 #

你碰到的Multipart form parse error - Invalid boundary in multipart: None错误，核心原因是手动设置了Content-Type: multipart/form-data。浏览器处理FormData请求时，会自动生成并添加boundary参数（用于分隔表单内不同字段），如果手动指定Content-Type，会丢失这个关键的boundary值，导致Django无法正确解析多部分表单数据。

修复步骤 #

1. 移除手动设置的Content-Type #

提交FormData请求时，不要手动设置Content-Type请求头，让浏览器自动处理。如果你的apiService默认是application/json，需要在本次请求中取消设置Content-Type，或者将其覆盖为undefined。

2. 正确构造FormData #

把所有字段（包括字符串参数和图片文件）都添加到FormData实例中：

// 前端示例代码
const handleSubmit = async (e) => {
  e.preventDefault();
  
  const formData = new FormData();
  // 追加字符串参数
  formData.append('title', formState.title);
  formData.append('description', formState.description);
  // 追加图片文件（假设useState存储的是File对象）
  if (formState.image) {
    formData.append('image', formState.image);
  }

  try {
    const response = await fetch('/api/your-django-endpoint', {
      method: 'POST',
      body: formData,
      // 删掉手动设置Content-Type的代码
      // headers: { 'Content-Type': 'multipart/form-data' }
    });
    const data = await response.json();
    console.log('上传成功', data);
  } catch (error) {
    console.error('上传失败', error);
  }
};

3. 调整apiService全局配置 #

如果你的apiService有全局拦截器或默认请求头，要确保当请求体是FormData时，自动跳过设置Content-Type: application/json。比如用axios的话可以这么处理：

// axios拦截器示例
axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    // 移除默认的Content-Type，交给浏览器自动处理
    delete config.headers['Content-Type'];
  } else {
    config.headers['Content-Type'] = 'application/json';
  }
  return config;
});

额外验证点 #

• 确认Django后端视图用request.FILES接收图片，且序列化器中正确配置了文件字段（比如ImageField()）。
• 检查前端存储的file对象是否有效：确保useState存的是用户选择的File实例，而非文件路径或其他类型。

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