Angular 17.0.7文件上传异常：FormData数据为空问题求助

• 控制台打印FormData显示空对象是正常行为
  FormData是特殊的表单数据对象，直接用console.log(formData)无法展示内部键值对。要查看内容，需通过entries()转换为数组，或用get()获取单个字段：

  // 查看所有字段键值对
  console.log(Array.from(formData.entries()));
  // 查看指定字段内容
  console.log(formData.get('file'));
  

• 后端接收不到数据的排查点

  1. 禁止手动设置Content-Type
     Angular的HttpClient会自动为FormData生成带边界标识的multipart/form-data请求头。如果手动添加headers: new HttpHeaders({'Content-Type': 'multipart/form-data'})，会丢失关键的边界信息，导致后端无法解析表单数据。确保apiServices.uploadFile方法中没有手动配置该请求头。
  2. 确认字段名与后端完全匹配
     检查FormData的键名（如file_name、file、size）是否和后端接口要求的参数名完全一致，大小写、拼写均不能出错。
  3. 确保selectedFile已正确赋值
     在调用上传方法前，先校验文件是否已选择，避免上传空数据：

     if (!this.selectedFile) {
       console.error('请先选择要上传的文件');
       return;
     }
     

• 调整后的示例代码

  sendUploadedFile() {
    if (!this.selectedFile) {
      console.error('请先选择文件');
      return;
    }
    this.fileUploadApiStatus = this.apiStatusConstants.inProgress;
  
    const formData: FormData = new FormData();
    formData.append('file_name', this.fileName);
    formData.append('file', this.selectedFile);
    formData.append('size', this.fileSize);
    
    // 正确打印FormData内容
    console.log('FormData详情:', Array.from(formData.entries()));
  
    this.apiServices.uploadFile(formData).subscribe({
      next: (response: any) => {
        this.fileUploadApiStatus = this.apiStatusConstants.success;
      },
      error: (err: any) => {
        this.fileUploadApiStatus = this.apiStatusConstants.failure;
      },
    });
  }
  

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