如何设置express multer以接受来自嵌套字段的图像并在邮递员中测试它？

Question

我期望前端的产品数据和变化图像是这样的。

type Product = {
    name: string
    price: number
    discount: number
    discountType: '%' | '₹'
    subCategoryId: number
    description: string
    image: string
    brandId: number
    categoryId: number
    status: 'Active' | 'Inactive'
    hsnCode: string
    variations: Array<{
        variationValueIds: Array<number> // [233, 344]
        productVariationName: string
        price: number
        availableQty: number
        sku: string
        variationImages: Array<any>
    }>
}

我已经设置了 multer 来接受变化图像。

productRoutesV2.post('/add-products', upload.fields([{ name: 'variationImages' }]), productController.addProductV2)

我无法弄清楚应该如何在 Postman 中测试它。另外，我怎么知道哪个

variationImages

属于哪个

variations

索引？

我尝试向邮递员提出一个看起来像这样的请求 邮递员请求

Answer 1

OP 似乎有两个问题：

1. 如何设置express multer以接受来自图像数组数组或嵌套字段的图像？
2. 如何在邮递员中测试相同的功能？

以下帖子试图解决第一部分。 第二部分会尽快更新。

Multer 接受来自文件数组数组的图像：

第 1 点：文件必须添加到表单对象中，如下所示。这是在客户端代码中。

// variation images
product1.variations.forEach((v) => {
  v.variationImages.forEach((img, i) => {
    formdata.append(`${img.path}`, img);
  });
});

第2点：Multer任何选项都可用于接受所有文件，如下所示。

app.post('/upload', upload.any(), (req, res) => {
  res.send('files uploaded');
});

第3点：默认情况下Multer会更改上传的文件名，以下代码将保留原始文件名。

    const storage = multer.diskStorage({
     ...,
      filename: function (req, file, cb) {
        cb(null, file.originalname);
      },
    });

Nodejs 客户端代码的完整列表。

const fs = require('fs');
const axios = require('axios');
const FormData = require('form-data');

const formdata = new FormData();

const product1 = {
  name: 'product1',
  variations: [
    {
      productVariationName: 'Variation-1',
      variationImages: [
        fs.createReadStream('./var1-img1.jpg'),
        fs.createReadStream('./var1-img2.jpg'),
      ],
    },
    {
      productVariationName: 'Variation-2',
      variationImages: [
        fs.createReadStream('./var2-img1.jpg'),
        fs.createReadStream('./var2-img2.jpg'),
      ],
    },
  ],
};

// product info.
formdata.append('product1', JSON.stringify(product1));

// variation images
product1.variations.forEach((v) => {
  v.variationImages.forEach((img, i) => {
    formdata.append(`${img.path}`, img);
  });
});

axios
  .post('http://localhost:3000/upload', formdata)
  .then((data) => {
    console.log(data.data);
  })
  .catch((error) => {
    console.log(error);
  });

Nodejs 服务器代码的完整列表。

const express = require('express');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

const upload = multer({
  storage: storage,
});

app.post('/upload', upload.any(), (req, res) => {
  res.send('files uploaded');
});

app.listen(3000, () => console.log('L@3000'));

测试：

node server.js
node client.js

// input hard coded in client.js:
const product1 = {
  name: 'product1',
  variations: [
    {
      productVariationName: 'Variation-1',
      variationImages: [
        fs.createReadStream('./var1-img1.jpg'),
        fs.createReadStream('./var1-img2.jpg'),
      ],
    },
    {
      productVariationName: 'Variation-2',
      variationImages: [
        fs.createReadStream('./var2-img1.jpg'),
        fs.createReadStream('./var2-img2.jpg'),
      ],
    },
  ],
};

//output:
upload folder in the server received the following files

var1-img1.jpg
var1-img2.jpg
var2-img1.jpg
var2-img2.jpg

引用：

1. 上传文件并使用 multer 传递附加参数
2. FormData：append()方法