我有一个Angular表单,它接受多个图像,我想用POST请求将这些图像发送到我的ExpressJS服务器。我设法做到这一点为一个单一的图片与multer和FormData,但我很难得到它做了超过1张图片。
下面是我的服务器端代码:
const storage = multer.memoryStorage();
let upload = multer({storage: storage});
router.post('/uploadPictures', upload.array("pictures", 5), uploadPicture);
uploadPicture函数只显示req.file、req.body和req. files。
这是我的Angular代码。
组件:
pictures: any[];
async uploadProperty() {
if (this.uploadPropertyForm.valid) {
const formData = new FormData();
for (let i = 0; i < this.pictures.length; i += 1) {
formData.set(`pictures[${i}]`, this.pictures[i]);
}
this.propertiesService
.uploadPictures(formData)
.subscribe((response) => {
console.log(response);
});
}
}
售后服务:
uploadPictures(pictures: FormData) {
const url = `${this.baseUrl}/properties/uploadPictures`;
return this.http.post(url, pictures);
}
我尝试了几种不同的方法来让它工作:
1.使用方法formData.append()这样,即使对于单个图像,req.file也是未定义的。
1.以不同的方式使用for循环:
for (let i = 0; i < this.pictures.length; i += 1) {
formData.set(`pictures[]`, this.pictures[i]);
}
或
for (let i = 0; i < this.pictures.length; i += 1) {
formData.append(`pictures[]`, this.pictures[i]);
}
当我使用formData.append()时,req.file & req.files是未定义的。
当我使用formData.set()时,我得到以下multer错误:
MulterError: Unexpected field
at wrappedFileFilter (F:\projectName\node_modules\multer\index.js:40:19)
at Multipart.<anonymous> (F:\projectName\node_modules\multer\lib\make-middleware.js:107:7)
at Multipart.emit (node:events:513:28)
at Multipart.emit (node:domain:489:12)
at HeaderParser.cb (F:\projectName\node_modules\busboy\lib\types\multipart.js:358:14)
at HeaderParser.push (F:\projectName\node_modules\busboy\lib\types\multipart.js:162:20)
at SBMH.ssCb [as _cb] (F:\projectName\node_modules\busboy\lib\types\multipart.js:394:37)
at feed (F:\projectName\node_modules\streamsearch\lib\sbmh.js:248:10)
at SBMH.push (F:\projectName\node_modules\streamsearch\lib\sbmh.js:104:16)
at Multipart._write (F:\projectName\node_modules\busboy\lib\types\multipart.js:567:19)
正如您所看到的,该消息并没有提供有关在哪里或什么原因导致问题的信息,所以我有点迷路了。
我只想上传2张图片,所以大小不应该是一个问题。
1条答案
按热度按时间y4ekin9u1#
您告诉它文件应该位于名为
pictures
的字段中。然后,您向它发送名为
pictures[0]
和pictures[1]
的字段中的文件数据。然后,您尝试在字段名为
pictures[]
的数据中输入数据。Multer不是PHP。使用你实际说的名字:
pictures
,后面没有其他内容。