我正在 Angular 构建前端提交表单。 该表单既有普通的文本输入字段，又有文件上传功能。 我将文本输入字段作为 JSON 对象“联系人”发布到 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 是“未定义”，即 null，并且我的 req.body 有一个为空的“profilePicData”键值对。我认为这是因为整个表单作为 JSON 而不是作为多部分表单数据提交。
但是我无法通过谷歌搜索任何关于如何将 JSON 和多部分作为一个 POST 请求发送到我的 API 的有用信息，以便 req.body 和 req.file 都能获取正确的信息。我想了解这里发生的事情背后的理论和最佳实践就是我所追求的。我应该有两个 POST url，一个用于 JSON，一个用于文件？或者我也应该将我的 JSON 作为多部分提交(我该如何在 Angular 中做到这一点)？如有任何帮助，我们将不胜感激。
最佳答案
您必须通过向 FormData 实例添加字段并将其作为有效负载发送，以多部分形式发送所有内容。
const form = new FormData();
form.append('file', profilePic);
form.append('contact', contact);
...
return this.http.post<ContactResponseData>('API_URL_HERE', form, ...)
关于node.js - 在同一 POST 请求上使用 multer (NodeJS) + 其他表单数据上传文件 (Angular)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62164949/