Angular调用Django上传文件传日期报Unsupported Media Type如何解决

问题根源 #

你遇到的Unsupported Media Type错误核心原因有两个：

• Angular侧没有使用FormData封装文件和日期参数，直接传递二进制文件对象和日期对象，请求头Content-Type不符合Django视图的接收要求
• HttpClient.post方法参数使用错误，你将日期参数放在了本该传请求配置的第三个参数位置，参数完全没有传递到请求体里

修正代码 #

1. 修改 file-upload.service.ts

DJANGO_SERVER: string = "http://127.0.0.1:8000";

constructor(private http:HttpClient) { }
// 调整参数接收逻辑，统一传入FormData
public upload(formData: FormData) {
  return this.http.post<any>(`${this.DJANGO_SERVER}/upload/`, formData);
}

2. 修改 upload.component.ts 的 onUpload 方法

onUpload() {
  this.loading = !this.loading;
  // 构造FormData对象
  const formData = new FormData();
  // 对应Django request.FILES['data']的key
  formData.append('data', this.filetoUpload);
  // 日期转成字符串格式，对应Django request.POST['selectedDate']的key，格式可根据你业务需要调整，比如yyyy-MM-dd
  formData.append('selectedDate', this.monthEndDate.toISOString().split('T')[0]);
  
  this.fileUploadService.upload(formData).subscribe(
    (event: any) => {
      if (typeof (event) === 'object') {
        this.shortLink = event.link;
        this.loading = false;
      }
    },
    // 新增错误回调方便排查问题
    (err) => {
      console.error('上传失败', err);
      this.loading = false;
    }
  )
}

3. Django views.py 笔误修正

你原视图代码里有个隐性问题：instance= uploader(request.FILES['data'], request.POST['selectedDate'])这里的uploader和视图函数重名了，实际应该替换为你自己的上传类名，否则会触发递归调用报错。

注意事项 #

不要手动在请求头里加Content-Type: multipart/form-data，Angular会自动根据FormData生成带正确分隔标识的请求头，手动添加会导致分隔标识缺失Django无法解析请求。
如果仍有参数接收问题，可以在Django视图里先打印request.FILES、request.POST的内容排查参数传递情况。

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