Angular 13 + NestJS 文件上傳

Question

我的 NestJS controller 中有以下 API：

import 'multer';
import csv from 'csvtojson';

import { Body, Controller, HttpStatus, Post, Res, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { Express, Response } from 'express';

@Controller()
export class TestController {
  @Post('/test-upload')
  @UseInterceptors(FileInterceptor('file'))
  async bulkUpload(@UploadedFile() file: Express.Multer.File, @Body() body: any, @Res() response: Response) {
    try {
      const csvString = file.buffer.toString();
      const jsonArray = await csv().fromString(csvString);
      const id = body['id'];

      console.log(id);

      // Send back the results
      response.status(HttpStatus.OK).send(jsonArray);
    } catch (e) {
      response.status(HttpStatus.INTERNAL_SERVER_ERROR).send(e.message);
    }
  }
}

在我的 Angular 代碼中，我這樣稱呼它：

bulkUpload(event: any): Observable<any> {
  const url = '/test-upload';

  const formData = new FormData();
  formData.append('file', event.target.files[0]);
  formData.append('id', 4);

  const options = { reportProgress: true, responseType: 'json' };

  this.http.post<any>(url, formData, options).subscribe({
    next: (data: any) => console.log(data),
    error: (error: any) => console.log(error)
  });
}

我正在上傳以下 CSV 文件：

id,name,status
2,test,active
5,foo,inactive
9,bar,inactive

這就是當我在 Angular 端進行控制台登錄時文件的樣子：

lastModified: 1660946990280
lastModifiedDate: Fri Aug 19 2022 18:09:50 GMT-0400 (Eastern Daylight Time) {}
name: "test.csv"
size: 61
type: "text/csv"
webkitRelativePath: ""

當我調用bulkUpload function 時，我收到以下錯誤：

error: "Bad Request"
message: "Unexpected token - in JSON at position 0"
statusCode: 400

有誰知道我做錯了什么？ 當我從 Postman 調用端點時，它工作正常並且我沒有收到任何錯誤。 我是否缺少一些標題或其他內容？ 如何上傳非 json 文件？

Answer 1

我必須確保將“Content-Type”header 設置為“multipart/form-data”。 我將 Angular function 更改為以下內容：

bulkUpload(event: any): Observable<any> {
  const url = '/test-upload';

  const formData = new FormData();
  formData.append('file', event.target.files[0]);
  formData.append('id', 4);

  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'multipart/form-data');
  headers = headers.append('Accept', '*/*');

  this.http.post<any>(url, formData, { headers }).subscribe({
    next: (data: any) => console.log(data),
    error: (error: any) => console.log(error)
  });
}

之后，錯誤消失了，我能夠正確地將文件發送到我的 NestJS API。