如何使用multer上传带索引的图片？

Question

我正在创建一个具有其变体的产品。变体是指衬衫可以有蓝色和 XL 尺寸的变体。所以我需要上传它的变体及其图像。如果我发送正文 变体：文件[]，那么我如何识别哪些变体具有哪些图像。

我想做类似的事情

product_variants[0][quantity]:5
product_variants[0][product_variant_attributes][0][variant]:2
product_variants[0][product_variant_attributes][1][variant]:10
product_variants[1][quantity]:10
product_variants[1][product_variant_attributes][0][variant]:6
product_variants[1][product_variant_attributes][1][variant]:13
**variant_images[0] : File
variant_images[1] : File**

如果我像这样用 multer 尝试：

ProductRouter.route('/')
  .get(getProducts)
  .post(
    authMiddleware,
    restrictTo(['admin']),
    fileMemoryInterceptor.fields([
      {
        name: 'image',
        maxCount: 1,
      },
      {
        name: 'variant_images',
        maxCount: 10,
      },
    ]),
    validateBody(CreateProductDto, true),
    createProduct,
  );

我收到错误：

err MulterError: Unexpected field
    at wrappedFileFilter (D:\Projects\MERN\e-reader\api\node_modules\multer\index.js:40:19)
    at Multipart.<anonymous> (D:\Projects\MERN\e-reader\api\node_modules\multer\lib\make-middleware.js:107:7)
    at Multipart.emit (node:events:514:28)
    at Multipart.emit (node:domain:488:12)
    at HeaderParser.cb (D:\Projects\MERN\e-reader\api\node_modules\busboy\lib\types\multipart.js:358:14)
    at HeaderParser.push (D:\Projects\MERN\e-reader\api\node_modules\busboy\lib\types\multipart.js:162:20)
    at SBMH.ssCb [as _cb] (D:\Projects\MERN\e-reader\api\node_modules\busboy\lib\types\multipart.js:394:37)
    at feed (D:\Projects\MERN\e-reader\api\node_modules\streamsearch\lib\sbmh.js:219:14)
    at SBMH.push (D:\Projects\MERN\e-reader\api\node_modules\streamsearch\lib\sbmh.js:104:16)
    at Multipart._write (D:\Projects\MERN\e-reader\api\node_modules\busboy\lib\types\multipart.js:567:19) {
  code: 'LIMIT_UNEXPECTED_FILE',
  field: 'variant_images[0]',
  storageErrors: []
}

请帮助我该怎么做？

我尝试使用我解释的解决方案，但失败了

Answer 1

您可以更改您的请求，例如，使用自定义

filename

将产品数据与产品文件连接起来。

这是一个伪代码，应该大致演示这个想法：

// client
// link file and file data via filename hash

const formData = new FormData();

products.forEach((product, i) => {

    // create custom filename which will serve to connect product data and product file
    const fileNameHash = 'file-' + i;

    // store related data in filename hash to match filename
    formData.append(
        fileNameHash,
        // store file related data
        JSON.stringify({
            filename: product.file.filename,
            data: {
                quantity: product.quantity,
                product_variant_attributes: product.variants
            }
        })
    );

    // get associated file, but use fileNameHash
    formData.append('variant_images',
        product.file,
        fileNameHash
    );

});


// backend
// get the associated data by filename

req.files.images.forEach(file => {
    console.log('file data', JSON.parse(req.body[file.filename]));
});