Angular 5与Django REST框架品牌Logo上传问题求助

看起来你遇到的核心问题是文件上传的格式不匹配：Django REST Framework的文件字段期望接收multipart/form-data格式的文件对象，但你的Angular代码目前是直接发送JSON格式的数据，哪怕转成base64也不符合Django的预期。下面是具体的排查和解决方案：

问题根源 #

Django的FileField（以及你的ImageSerializer里的img字段）需要接收浏览器通过表单上传的File对象，而不是JSON中的字符串（包括base64编码的内容）。当你用Angular的http.post直接发送Brand对象时，请求是application/json格式，Django无法将其中的内容解析为文件，所以返回"The submitted data was not a file"错误。

解决方案：使用FormData上传文件 #

要正确上传文件，你需要用浏览器的FormData对象来包装表单数据（包括文件），它会自动设置正确的multipart/form-data请求头，让Django能识别文件。

1. 调整Angular服务的create方法 #

修改你的BrandService中的create方法，用FormData来构建请求体，而不是直接发送Brand对象：

create(brand: Brand, logoFile?: File): Observable<Brand> {
  const formData = new FormData();

  // 添加品牌的普通字段
  formData.append('name', brand.name);
  formData.append('description', brand.description);
  formData.append('is_active', brand.is_active.toString());
  formData.append('is_customer_brand', brand.is_customer_brand.toString());

  // 如果有选中的Logo文件，添加到FormData中（注意字段名要和Django Serializer对应）
  if (logoFile) {
    formData.append('logo_img[img]', logoFile, logoFile.name);
  }

  return this.http.post(endpoint + 'create/', formData)
    .map(response => response.json())
    .catch(this.handleError);
}

2. 调整组件中的调用逻辑 #

在你的Angular组件中，当用户选择Logo文件后，需要把File对象传递给create方法，而不是把它转成base64或者塞进Brand对象的logo_img.img里：

// 假设组件中有文件选择的input
onLogoSelected(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  this.selectedLogoFile = file;
}

// 创建品牌的方法
createBrand() {
  this.brandService.create(this.currentBrand, this.selectedLogoFile)
    .subscribe(
      (createdBrand) => console.log('品牌创建成功', createdBrand),
      (error) => console.error('创建失败', error)
    );
}

3. 确认Django Serializer的配置 #

确保你的ImageSerializer中的img字段是FileField（或者继承自它的字段），比如：

class ImageSerializer(ModelSerializer):
    img = serializers.FileField()
    # 其他字段...

    class Meta:
        model = Image
        fields = ['id', 'img', 'img_md', 'img_sm', 'img_xs']

你的现有Serializer代码看起来已经在处理文件保存了，只要前端发送的是正确的multipart/form-data格式，Django就能正确解析logo_img[img]对应的文件对象。

为什么base64方法不行？ #

Django的FileField默认不支持解析base64字符串，除非你自定义一个Serializer字段来处理base64解码并保存为文件。但这种方式比标准的multipart/form-data上传更复杂，而且不符合浏览器文件上传的常规做法，所以不推荐。

额外注意事项 #

• 确保你的Django项目已经配置了跨域支持（比如使用django-cors-headers），因为Angular和Django运行在不同端口。
• 不要手动设置Content-Type为multipart/form-data，FormData会自动添加正确的请求头（包括边界字符串），手动设置反而可能导致解析错误。

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