Angular 5向Django Rest发送含图片的multipart/form-data数据异常求助

兄弟，我之前也踩过一模一样的坑！你这个情况百分百是Angular这边构建请求的方式不对，导致所有数据被当成title字段的内容传过去了。下面分客户端（Angular5）和服务端（Django Rest）两部分给你说正确的操作方式：

一、Angular5客户端：正确构建FormData请求 #

核心要点：必须用FormData对象来组装表单数据，绝对不能直接传JSON对象，也别手动设置Content-Type！

1. 获取文件对象 #

先确保你能正确拿到用户选择的图片文件，比如通过文件选择器：

<!-- 模板里的文件选择控件 -->
<input type="file" (change)="onFileSelected($event)">
<!-- 其他表单控件，比如title输入框 -->
<input type="text" [(ngModel)]="formData.title" name="title">
<button (click)="submitUpload()">上传</button>

对应的组件代码：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html'
})
export class UploadComponent {
  formData = { title: '' };
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  // 获取选中的文件
  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  // 提交上传请求
  submitUpload() {
    if (!this.selectedFile) return;

    // 关键：创建FormData实例，逐个追加字段
    const uploadFormData = new FormData();
    // 追加文本字段（注意字段名要和服务端序列化器的字段名一致！）
    uploadFormData.append('title', this.formData.title);
    // 追加图片文件，第三个参数是文件名（可选，不传的话会用默认文件名）
    uploadFormData.append('image', this.selectedFile, this.selectedFile.name);

    // 发送请求：别手动设置Content-Type！Angular会自动生成带boundary的正确头
    this.http.post('http://你的DjangoAPI地址/', uploadFormData)
      .subscribe({
        next: res => console.log('上传成功！', res),
        error: err => console.error('上传失败', err)
      });
  }
}

常见错误提醒： #

• ❌ 不要手动设置headers: { 'Content-Type': 'multipart/form-data' }，这会丢失自动生成的boundary分隔符，导致服务端无法正确解析各个字段。
• ❌ 不要直接把{ title: 'xxx', image: file }这种JSON对象传给post方法，Angular会把它序列化成JSON，服务端解析时就会把整个JSON串当成title字段的内容。

二、Django Rest服务端：正确配置接收multipart数据 #

1. 模型定义（确保ImageField配置正确） #

from django.db import models

class YourModel(models.Model):
    title = models.CharField(max_length=200)
    # upload_to指定图片存储的子目录，需要提前配置好MEDIA_ROOT和MEDIA_URL
    image = models.ImageField(upload_to='uploads/images/')

2. 序列化器（字段名要和客户端append的字段完全一致） #

from rest_framework import serializers
from .models import YourModel

class YourModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = YourModel
        fields = ['id', 'title', 'image']

3. 视图配置（确保支持multipart解析） #

Django Rest默认已经支持MultiPartParser，但如果你自定义了DEFAULT_PARSER_CLASSES，要确保包含它：

# settings.py里的REST_FRAMEWORK配置
REST_FRAMEWORK = {
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework.parsers.JSONParser',
        'rest_framework.parsers.MultiPartParser',  # 必须有这个！
        'rest_framework.parsers.FormParser',
    ],
}

然后写一个简单的创建视图：

from rest_framework import generics
from .models import YourModel
from .serializers import YourModelSerializer

class UploadCreateView(generics.CreateAPIView):
    queryset = YourModel.objects.all()
    serializer_class = YourModelSerializer

4. 测试验证 #

可以先用Postman发送一个multipart请求：

• 请求方法：POST
• 请求地址：你的API地址
• 表单数据：添加title（文本类型）和image（文件类型）两个字段，上传一张图片
  如果服务端能正常接收并返回创建的数据，说明服务端没问题，再回头检查Angular的代码。

最后排查要点 #

如果还是有问题，检查这几点：

1. 客户端append的字段名和服务端序列化器的字段名是否完全一致（比如客户端写的是img，服务端是image就会出错）
2. 服务端的MEDIA_ROOT和MEDIA_URL是否配置正确，确保图片能正常存储
3. 检查Django的控制台输出，看POST请求的原始数据结构，确认客户端发送的格式是否正确

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