Angular 18通过HttpClient向FastAPI发送FormData失败求助

问题原因 #

你的Angular代码错误地将FormData包装在了普通对象中作为请求体发送，导致FastAPI无法识别正确的文件字段：

• Angular的HttpClient.post传入普通对象时，会自动将其序列化为JSON格式，请求头Content-Type变为application/json
• FastAPI的UploadFile = File(...)要求请求必须是**multipart/form-data**格式，且字段名要和后端定义的upload_file严格一致

修正后的Angular代码 #

直接将FormData作为请求体传入，不需要额外包装：

uploadFile(fileFormData: FormData) {
    const url: string = this.api_url;
    // 直接传递FormData，不要包装成对象
    return this.httpClient.post(url, fileFormData);
}

补充：正确构造FormData的方式 #

确保调用上传方法前，已正确构造包含文件的FormData，字段名必须和后端的upload_file匹配：

// 示例：构造FormData
const formData = new FormData();
// 假设file是你获取到的File对象
formData.append('upload_file', file);
// 调用上传方法
this.uploadService.uploadFile(formData);

关键说明 #

• 不要手动设置Content-Type为multipart/form-data，Angular会自动为FormData类型的请求体设置正确的请求头（包括自动生成的boundary）
• 手动设置请求头反而会因为缺少boundary参数，导致后端无法解析表单数据

验证修正后的请求 #

发送的请求需满足：

• 请求方法：POST
• 请求头：Content-Type: multipart/form-data; boundary=xxxx（xxxx为自动生成的边界符）
• 请求体：包含名为upload_file的文件字段

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