Angular13中转换音频Blob并发送至Node API的技术咨询

你不需要把Blob转换为buffer或base64格式，FormData本身支持直接附加Blob对象，Node端的req.files可以正常接收。以下是Angular 13中的完整实现步骤：

1. 导入HttpClientModule #

在你的Angular模块（比如app.module.ts）中确保导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

2. 在组件中发送请求 #

注入HttpClient，构造FormData并发送POST请求：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-audio-upload',
  templateUrl: './audio-upload.component.html'
})
export class AudioUploadComponent {
  constructor(private http: HttpClient) {}

  uploadAudio(blob: Blob, title: string): void {
    const formData = new FormData();
    // 直接将Blob附加到FormData，第三个参数是文件名
    formData.append('file', blob, `${title}.wav`);

    // 发送请求，无需手动设置Content-Type，Angular会自动处理multipart/form-data边界
    this.http.post('/api/upload-audio', formData)
      .subscribe({
        next: (response) => {
          console.log('上传成功', response);
        },
        error: (error) => {
          console.error('上传失败', error);
        }
      });
  }
}

关键说明 #

• 你之前用formData.get('file')输出Blob是正常现象，FormData存储的就是原始的Blob对象，不需要额外转换。
• 不要手动设置Content-Type: multipart/form-data，Angular会自动生成包含正确boundary的请求头，手动设置会导致Node端无法正确解析表单数据。
• Node端的API保持你现有的逻辑即可（通过req.files接收），Postman能正常工作说明后端逻辑没问题。

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