如何在Angular to Nest.js服务中上传ReactiveForms上的文件

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-file-upload',
  template: `
    <form [formGroup]="uploadForm" (submit)="onSubmit()">
      <input type="file" (change)="onFileSelected($event)">
      <button type="submit">上传文件</button>
    </form>
  `
})
export class FileUploadComponent {
  uploadForm: FormGroup;
  selectedFile: File;

  constructor(private fb: FormBuilder) {
    this.uploadForm = this.fb.group({
      file: ['']
    });
  }

  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  onSubmit() {
    const formData = new FormData();
    formData.append('file', this.selectedFile);

    // 发送文件至Nest.js服务
    // 可以使用HttpClient或其他HTTP库发送POST请求到Nest.js的API端点
  }
}

npm install @nestjs/platform-express

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('files')
export class FilesController {
  constructor(private filesService: FilesService) {}

  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  uploadFile(@UploadedFile() file: Express.Multer.File) {
    // 处理上传的文件
    // 可以在这里调用业务逻辑，例如保存文件至服务器或其他操作
    // 返回文件上传成功的响应等
  }
}

import { Injectable } from '@nestjs/common';

@Injectable()
export class FilesService {
  // 可以在这里定义处理文件上传的业务逻辑
}

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from './app.module';
import { MulterModule } from '@nestjs/platform-express';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.use(MulterModule.register({
    dest: './uploads' // 定义上传文件的目标目录
  }));

  await app.listen(3000);
}
bootstrap();