使用Angular4向Django API上传图片时遇报错：data was not file

我之前也踩过这个坑，Django的文件上传接口对请求格式要求很严格，你这个错误的核心原因是：前端没有用正确的FormData包装图片数据，而是直接传递了普通JSON对象，导致Django识别不到文件。下面是具体的修复方案：

1. 修正组件中的文件上传逻辑 #

你需要用FormData来包装文件和表单数据，而不是普通的JavaScript对象。修改你的HomeComponent代码如下：

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers} from '@angular/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private http: Http) { }
  
  selectedFile: File | null = null; // 存储选中的文件

  // 处理文件选择事件，获取浏览器提供的标准File对象
  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0]; // 单文件上传取第一个，多文件可遍历files数组
  }

  addSaveData() {
    if (!this.selectedFile) {
      console.warn('请先选择要上传的图片');
      return;
    }

    // 创建FormData对象，自动处理multipart/form-data格式
    const formData = new FormData();
    formData.append('image', this.selectedFile);
    // 如果有其他表单字段，比如标题、描述，同样用append添加
    // formData.append('image_title', '我的风景照');

    // 关键：不要手动设置Content-Type，浏览器会自动添加带边界符的正确头
    const headers = new Headers();
    headers.delete('Content-Type');

    // 发送POST请求到你的Django API地址
    this.http.post('http://你的Django接口地址/upload', formData, { headers: headers })
      .subscribe(
        (response: Response) => {
          console.log('图片上传成功！', response.json());
          // 这里可以添加上传成功后的逻辑，比如重置表单、提示用户
        },
        (error) => {
          console.error('图片上传失败：', error);
        }
      );
  }

  ngOnInit(): void { }
}

2. 修正HTML模板的文件选择控件 #

确保你的模板里有正确的文件输入控件，并绑定选择事件：

<!-- 限制仅选择图片文件 -->
<input type="file" accept="image/*" (change)="onFileSelected($event)" />

<!-- 触发上传的按钮 -->
<button (click)="addSaveData()">上传图片</button>

3. 确认Django后端的处理逻辑 #

确保你的Django视图正确接收文件，示例代码如下：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.core.files.storage import default_storage

@csrf_exempt # 跨域场景下需要添加，生产环境建议用CSRF令牌验证
def upload_image(request):
    if request.method == 'POST' and request.FILES.get('image'):
        image_file = request.FILES['image']
        # 将文件保存到服务器指定位置
        saved_path = default_storage.save(image_file.name, image_file)
        return JsonResponse({
            'success': True,
            'file_path': saved_path
        })
    return JsonResponse({'success': False, 'error': '未接收到有效文件'}, status=400)

几个关键注意点 #

• 不要手动设置Content-Type：浏览器会为FormData自动生成带唯一边界符的multipart/form-data头，手动设置会导致Django无法解析文件。
• 必须传递标准File对象：通过input[type=file]的change事件获取的files才是浏览器认可的File对象，不能用其他格式的数据代替。
• 跨域配置：如果Angular和Django不在同一域名下，需要在Django中配置CORS，允许multipart/form-data类型的请求。

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