FormData先追加文件致后端参数undefined的原因排查

我在Angular中实现了一个文件上传组件，通过input获取文件后用FormData将文件和app_id一起发送到后端，但遇到了奇怪的问题：当先追加文件到FormData时，后端获取的app_id是undefined；把文件追加在最后时却能正常获取。

前端相关代码 #

组件模板（uploader.component.html）

// uploader.component.html

...other HTML elements

<div class="file-uploader-container">
    <input (change)="handleFileUpload($event.target.files)" type="file" name="files" #fileField hidden/>
</div>

组件逻辑（uploader.component.ts）

// uploader.component.ts

handleFileUpload(files: FileList) {
    try {

      this.file = files.item(0) ?? undefined;
      this.filename = this.file?.name;

      if(!this.file) {
        throw new Error('Error during the file upload')
      }

      if(this.allowedTypes.length && !this.allowedTypes.includes(this.fileType!)) {
        throw new Error(`Invalid file format`)
      }

      const form = new FormData();
      form.append('file', this.file); // <-- 先追加文件时，后端的app_id为undefined
      form.append('app_id', environment.app_id);

      this.isUploading = true;

      // 调用存储服务上传文件
      this.storageService.uploadFileOnStorage(form).pipe(
        tap( () => this.isUploading = false)
      ).subscribe({
        next: (uploadedFile) => {
          this.onFileUpload.emit(uploadedFile.file_key);
        },
        error: (error: any) => {
          console.error(error);
          this.swalService.showErrorMesssage("Error during the upload");
          this.clearInput();
        }
      })


    } catch(error: any) {
      this.swalService.showErrorMesssage(error.message);
      this.clearInput();
    }
  }

存储服务（upload.service.ts）

// upload.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { StorageUploadDTO } from '../types/dto/storage-upload.dto';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor(
    private http: HttpClient
  ) { }

  uploadFileOnStorage(form: FormData) {
    return this.http.post<StorageUploadDTO>(`${environment.storageBackend}/api/v1/file/upload`, form)
  }
}

后端代码（Node.js） #

// upload API
server.post(
`${basePath}/upload`,
 async (request: any, reply: any) => {

    // 从multipart表单中获取文件和app_id
    const file = await request.file();
    const appId = file.fields.app_id.value; // <-- 先追加文件时，此处app_id为undefined


    // ...AWS上传逻辑
}

问题原因 #

你后端使用的request.file()方法（看起来是Fastify框架的API）默认只会解析第一个文件类型的表单块，并且仅会包含该文件块之前的普通表单字段到返回的file.fields中：

• 当file放在FormData第一个位置时，后面的app_id属于独立的后续表单块，request.file()不会解析这些后续内容，因此file.fields里找不到app_id。
• 当app_id放在file前面时，request.file()解析第一个文件块时会把前置的普通字段一起纳入file.fields，所以能正常获取到值。

解决方法 #

方案1：调整FormData追加顺序 #

将普通字段（比如app_id）放在文件前面，确保request.file()能捕获到这些前置字段：

const form = new FormData();
form.append('app_id', environment.app_id); // 先追加普通字段
form.append('file', this.file); // 再追加文件

方案2：完整解析所有表单内容 #

不要依赖request.file()，改用框架提供的完整multipart解析方式，遍历所有表单块，这样无论字段顺序如何都能正确获取所有数据（以Fastify为例）：

server.post(`${basePath}/upload`, async (request, reply) => {
  const parts = request.parts();
  let targetFile;
  let appId;

  // 遍历所有表单块
  for await (const part of parts) {
    if (part.file) {
      // 捕获文件块
      targetFile = part;
    } else {
      // 捕获普通字段
      if (part.fieldname === 'app_id') {
        appId = part.value;
      }
    }
  }

  // 后续上传逻辑
});

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