如何在HTTP请求中发送带上传文件的表单并正确传递附件

• 你当前使用application/json作为请求头的Content-Type，JSON格式不支持序列化File对象，因此上传的附件字段无法被服务器正确识别
• NgForm的value中的文件字段不会自动被处理为可上传的二进制内容，必须手动通过FormData封装
• 手动指定application/json请求头会强制请求体按JSON格式解析，直接丢弃无法序列化的File对象内容

替换原有请求逻辑，使用FormData封装所有请求参数，Angular的HttpClient会自动识别FormData类型，自动生成带boundary的multipart/form-data请求头，无需手动设置：

post(f: NgForm) {
    const email = f.value;
    // 初始化FormData对象封装所有请求参数
    const formData = new FormData();
    // 追加普通文本表单字段
    formData.append('email', email.email);
    formData.append('object', email.object);
    formData.append('message', email.message);
    // 追加文件字段，第三个参数为文件名，可选
    if (email.attach) {
        formData.append('attach', email.attach, email.attach.name);
    }
    return this.httpClient
      .post(
        environment.apiBaseUrl + 'usermail',
        formData
      )
      .subscribe((response) => {
        console.log(response);
      });
}

• 确认文件输入控件已正确绑定，f.value.attach确实是完整的File对象，而非文件名或其他字符串类型
• 确认后端接口已配置支持multipart/form-data类型的请求，且接收参数名与FormData中append的字段名完全对应
• 如果是多文件上传，需要遍历文件列表，多次调用formData.append('attach', 单个文件对象)传递所有附件

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