将表单数据发送到 Node js Rest API 时请求正文为空

Question

我创建了一个 HTML 表单来将数据存储到 MSSQL 中

这是表单：

<form [formGroup]="insProtocolloForm" (ngSubmit)="sumit()" enctype="multipart/form-data">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="newProtInStaticBackdropLabel">Nuovo protocollo in entrata</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="dataEmissione">Data Emissione</label>
                    <input formControlName="dataEmissione" id="dataEmissione" name="dataEmissione" type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="anno">Anno</label>
                    <input formControlName="anno" id="anno" name="anno" type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="sede">Sede</label>
                    <input formControlName="sede" id="sede" name="sede" type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="entrataUscita">@Entrata Uscita</label>
                    <input formControlName="entrataUscita" id="entrataUscita" name="entrataUscita" type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="fileToUpload">File</label>
                    <input formControlName="fileToUpload" id="fileToUpload" name="fileToUpload" type="file" class="form-control" (change)="onFilechange($event)" />
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
            <button type="submit" class="btn btn-success">Inserisci</button>
            </div>
        </div>
    </div>
</form>

这是 component.ts

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../service/crud.service';
import { DatePipe } from '@angular/common'
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

    insProtocolloForm = new FormGroup({
        dataEmissione: new FormControl('', [Validators.required]),
        anno: new FormControl('', [Validators.required]),
        sede: new FormControl('', [Validators.required]),
        entrataUscita: new FormControl('', [Validators.required]),
        fileToUpload: new FormControl('', [Validators.required]),
        fileSource: new FormControl('', [Validators.required])
    });

    constructor(private crudService: CrudService, private http: HttpClient) { }

    get f(){
        return this.insProtocolloForm.controls;
    }

    onFilechange(event: any) {
        //console.log(event.target.files[0])
        if (event.target.files.length > 0) {
            const fileToUpload = event.target.files[0];
            this.insProtocolloForm.patchValue({
                fileSource: fileToUpload
            });
        }
    }

    sumit() {
        console.log('### INIZIO SUBMIT() ###');

        const formData = new FormData();
        
        formData.append('dataEmissione', this.insProtocolloForm.get('dataEmissione')?.value);
        formData.append('anno', this.insProtocolloForm.get('anno')?.value);
        formData.append('sede', this.insProtocolloForm.get('sede')?.value);
        formData.append('entrataUscita', this.insProtocolloForm.get('entrataUscita')?.value);
        formData.append('fileToUpload', this.insProtocolloForm.get('fileSource')?.value);
        
        console.log(formData);

        if (this.insProtocolloForm.get('fileSource')?.value) {
            this.http.post('http://localhost:8090/api/inserisci-protocollo', formData)
                .subscribe(res => {
                    console.log('res: ' + res);
                    alert('Uploaded Successfully.');
                });
        } else {
            alert("Si prega di scegliere un file da caricare")
        }

        console.log('### FINE SUBMIT() ###');
    }

    ngOnInit(): void { }
}

在提交时我调用 Node JS REST API

const sqlController = require('./controllers/dboperations-sql');

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

const app = express();
const router = express.Router();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.use('/api', router);
app.use(upload.single());

router.use((request,response,next)=>{
    next();
})

//Inserisco un nuovo protocollo -> /inserisci-protocollo
router.route('/inserisci-protocollo').post((request,response)=>{
    console.log('### Requested: Insert new Protocol ###');

    /*request.on('data', data => {
        console.log(data.toString());
    });*/

    let newProtocollo = request.body;

    //console.log(newProtocollo);

    sqlController.addProtocollo(newProtocollo).then(result => {
       response.status(201).json(result);
    })
})

这就是问题所在。 request.body 始终为空。

但是，如果我启用“request.on('data', data => {...”代码，我会看到所有表单字段。

我也尝试使用邮递员发送数据，但得到相同的结果。

使用邮递员，如果我设置了“form-data”选项，正文始终为空，但如果设置“x-www-form-urlencoded”选项，我会看到除文件之外的所有

。

数据 我读过很多关于它的帖子，但还没有还没找到解决方案，

我快要疯了，

非常感谢

阿德里亚诺。

Answer 1

您需要在来自 Angular 的 http 客户端的请求中添加内容类型标头。

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
    };
this.http.post('http://localhost:8090/api/inserisci-protocollo', formData, httpOptions)