如何在TypeScript接口中设置File对象为Blob/字节数组？

Blob/File对象无法被JSON序列化，直接将包含Blob的对象通过普通POST请求发送时，image字段会被转换为空对象{}，这就是服务器收到空值的原因。

优先采用FormData方式上传（HTTP文件上传的标准方案，性能更优），也可以将文件转为Base64字符串（仅适合小文件）。

方案1：使用FormData上传（推荐） #

FormData专门用于处理包含文件的表单数据，Angular的HttpClient会自动设置正确的Content-Type: multipart/form-data请求头。

修改TypeScript代码 #

public imageEdit: Image = { id: 0, name: "something" };

public handleFileInput(file: any): void {
  const files = file.files as FileList;
  if(files.length === 1) {
    const formData = new FormData();
    // 添加普通字段
    formData.append('id', this.imageEdit.id.toString());
    formData.append('name', this.imageEdit.name);
    // 添加文件（第三个参数可选，用于指定服务器端接收的文件名）
    formData.append('image', files[0], files[0].name);
    
    // 发送请求
    this.http.post("my/url", formData).subscribe({
      next: (res) => console.log('上传成功', res),
      error: (err) => console.error('上传失败', err)
    });
  }
}

服务器端适配 #

需要确保后端接口支持解析multipart/form-data格式的请求，从FormData中提取id、name字段和image文件。

方案2：将文件转为Base64字符串（仅小文件适用） #

把文件转成Base64字符串后，可直接放入JSON对象中发送，但会使文件体积增加约30%，大文件不建议使用。

1. 修改接口定义 #

export interface Image {
    id: number;
    name: string;
    image: string; // 改为Base64字符串类型
}

2. 修改TypeScript代码 #

public imageEdit: Image = { id: 0, name: "something" };

public handleFileInput(file: any): void {
  const files = file.files as FileList;
  if(files.length === 1) {
    const reader = new FileReader();
    reader.onload = (e) => {
      // 将文件转为Base64字符串
      this.imageEdit.image = e.target.result as string;
      // 发送JSON请求
      this.http.post("my/url", this.imageEdit).subscribe({
        next: (res) => console.log('上传成功', res),
        error: (err) => console.error('上传失败', err)
      });
    };
    reader.readAsDataURL(files[0]);
  }
}

服务器端适配 #

需要将接收到的Base64字符串解码为文件。

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