Angular子组件向父组件传递文件时表单数据为空问题

核心问题分析 #

1. 子组件错误触发文件选择框重置：onFileSelected方法里调用this.onClick()会重新打开文件选择框，导致当前选中的文件引用被浏览器标记为无效，传递给父组件的文件无法被读取。
2. 父组件错误设置请求头：手动添加Content-Type: multipart/form-data会覆盖Angular自动生成的带boundary的请求头，后端无法解析FormData中的文件内容。

修正后的代码 #

子组件（MatchingUploadFileComponent）

import {Component, ElementRef, ViewChild, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-matching-upload-file',
  templateUrl: './matching-upload-file.component.html',
  styleUrls: ['./matching-upload-file.component.scss']
})
export class MatchingUploadFileComponent {

  @ViewChild('fileUpload') fileUpload: ElementRef;
  @Output() selectedFile = new EventEmitter<File[]>();

  constructor() {
  }

  onClick() {
    this.fileUpload?.nativeElement.click();
  }

  onFileSelected(event) {
    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
    // 移除触发文件选择框的代码，避免重置文件引用
    this.selectedFile.emit(Array.from(files)); // 将FileList转为数组，方便父组件处理
  }
}

子组件模板：

<button mat-raised-button color="primary" (click)="onClick()">
  <mat-icon>add</mat-icon>
  选择文件
</button>
<input #fileUpload
       id="fileUpload"
       hidden
       type="file"
       (change)="onFileSelected($event)"
>

父组件上传服务代码

upload(file: File, url: string, token: string) {
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);
    const headers = new HttpHeaders().set('Authorization', token);
    // 移除手动设置的Content-Type，Angular会自动生成正确的请求头
    const req = new HttpRequest(
      'POST',
      url,
      formData,
      {reportProgress: true, headers}
    );

    this.httpClient.request(req).subscribe(
      (response) => {
        console.log('上传成功', response);
      },
      (error: HttpErrorResponse) => {
        console.error('上传失败', error);
      });
  }

关键修改说明 #

• 移除文件选择框重复触发：删除onFileSelected中的this.onClick()，保证选中的文件引用不会被重置。
• 自动生成请求头：不要手动设置multipart/form-data，Angular会根据FormData自动添加包含boundary的请求头，确保后端能正确解析文件。
• FileList转数组：将FileList转为普通数组，避免父组件处理类数组对象时出现的兼容性问题。

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