React前端向Django后端传图片时文件显示Undefined问题求助

1. Prop名称不匹配（最可能的直接原因） #

看你的代码逻辑：

• Image组件渲染Caption时，传递的属性是 file={this.state.file}
• 但Caption的handleSubmit方法里，却用this.props.fileInput获取文件

这是明显的变量名不一致问题！Caption组件接收的属性是file，不是fileInput，你需要把handleSubmit里的this.props.fileInput全部替换为this.props.file，或者在传递属性时把名称改成fileInput。

修改后handleSubmit的核心代码：

console.log('Image: ', this.props.file);
console.log('Image type: ', typeof this.props.file);
console.log('Image is a File: ', this.props.file instanceof File);

formData.append('file', this.props.file);

2. 不要手动设置multipart/form-data请求头 #

用axios发送FormData时，禁止手动添加Content-Type: multipart/form-data。浏览器会自动生成包含boundary参数的正确请求头，手动设置会丢失这个关键参数，导致后端无法解析表单数据。

简化请求代码：

const response = await axios.post(API_URL, formData);
// 移除手动设置headers的代码

3. 确认文件对象的有效性 #

检查控制台输出：

• 如果this.props.file instanceof File输出为false，说明你拿到的不是合法的File对象
• 确保在文件选择时，正确从input元素的files数组中取文件，示例：

  // Image组件中处理文件选择的逻辑
  handleFileChange = (e) => {
    if (e.target.files.length > 0) {
      this.setState({ file: e.target.files[0] });
    }
  }
  
  // 对应的input元素
  <input type="file" onChange={this.handleFileChange} />
  

  只有e.target.files[0]才是标准的File实例，不要传递input元素本身或其他无效值。

4. 后端接收配置检查 #

Django端需要对应配置才能接收文件：

• 视图中用request.FILES.get('file')获取文件，不要用request.POST
• 确保settings.py中正确配置了MEDIA_ROOT和MEDIA_URL
• 如果使用Django表单类，要确保表单支持multipart/form-data（前端用FormData的话，后端视图只要处理request.FILES即可）

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