在同一个POST请求中上传文件与multer（NodeJS）+其他表单数据（Angular）。

Question

我在Angular构建的前端上提交了一个表单，这个表单有正常的文本输入字段和一个文件上传功能，我把文本输入字段作为一个JSON对象 "contact "POST到我的NodeJS API中，同时把文件作为一个新的FormData作为这样的对象。

// 'contact' defined above as a JSON object
// 'profilePic' set from event.target.files[0] in a listener function

const profilePicData = new FormData();
profilePicData.append('file', profilePic);

            return this.http
                .post<ContactResponseData>('API_URL_HERE',
                { contact, profilePicData } ...

然后从我的API中捕获它，就像这样。

router.post("/", upload.single('file'),(req, res) => {

    console.log("REQ: "+ req);

    console.log("BODY: " + JSON.stringify(req.body));
    console.log("FILE: " + req.file);

req.file是 "undefined"，即null，而我的req.body有一个 "profilePicData "键值对是空的。我认为这是因为整个表单是以JSON形式提交的，而不是以多部分表单数据的形式提交的。

但是我在google上找不到任何有用的东西，如何将JSON和多部分数据作为一个POST请求发送给我的API，以便req.body和req.file都能接收到正确的信息。我想了解理论和最佳实践背后的东西才是我想要的。我应该有两个POST URL，一个用于JSON，一个用于文件？或者我应该将JSON也作为多部分提交（在Angular中如何做）？感谢任何帮助。

Answer 1

你必须将所有内容以多部分的形式发送，通过将字段添加至 FormData 并将其作为有效载荷发送。

const form = new FormData();
form.append('file', profilePic);
form.append('contact', contact);

...
return this.http.post<ContactResponseData>('API_URL_HERE', form, ...)