NodeJS 使用multer通过POST从Angular向ExpressJS服务器发送图像数组

46scxncf  于 2023-06-05  发布在  Node.js
关注(0)|答案(1)|浏览(139)

我有一个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张图片,所以大小不应该是一个问题。

y4ekin9u

y4ekin9u1#

您告诉它文件应该位于名为pictures的字段中。

router.post('/uploadPictures', upload.array("pictures", 5), uploadPicture);

然后,您向它发送名为pictures[0]pictures[1]的字段中的文件数据。

formData.set(`pictures[${i}]`, this.pictures[i]);

然后,您尝试在字段名为pictures[]的数据中输入数据。

formData.append(`pictures[]`, this.pictures[i]);

Multer不是PHP。使用你实际说的名字:pictures,后面没有其他内容。

相关问题