如何在 Nest.JS API 应用程序中从 Angular 接收多部分数据

Question

我正在尝试提交一个包含来自 Angular 项目的图像的小表单，并在 node.js API 中接收它。

这是我的角度代码：

async save() {
    this.error = (!this.image || !this.email || !this.name);

    if(!this.error) {
        var form = new FormData();
        form.append("image", this.image);
        form.append("email", this.email);
        form.append("name", this.name);
        await firstValueFrom(
            this.httpClient.post(`${environment.api_url}/emp`,
            form,
            {
                headers: {
                    'x-api-key': environment.api_psk,
                    "Content-Type": "multipart/form-data"
                }
            }),
        )
            .then((res: any) => {
                this.empid = res.id;
                this.imageurl = res.url;
                this.page = 2;
            })
            .catch(async (err) => {
                throw err;
            });
    }
    
}

我已经确认 this.image、this.email 和 this.name 都已成功接收到这里。

this.image

正在通过输入字段上的（更改）进行填充，如下：

async imageupload(target) {
    this.image = target.files[0];
}

Node.js API 使用 NestJS。这是控制器：

@Post("emp")
@UseInterceptors(FileInterceptor("image"))
@HttpCode(HttpStatus.OK)
async createEmpEntry(
    @UploadedFile() file: Express.Multer.File,
    @UploadedFiles() files: Express.Multer.File[],
) {
    console.log(file);
    console.log(files);
    return undefined; // TBC
}

当我提交表单时，我在 API 上收到错误：“错误：多部分：未找到边界”。 我尝试过使用和不使用 @UploadedFiles() 装饰器。

请问有什么指点吗？

Answer 1

删除

Content-Type

标题。如果浏览器识别出存在

Content-Type

请求，则应自动设置 multipart/form-data

with

边界