尝试将图像上传到 cloudinary 时出现 Multer 错误

Question

我正在使用 mern stack 构建一个 crud 应用程序，它允许用户使用表单上传图像并输入其他数据，例如产品名称、描述、数量和价格。 在邮递员中测试 api 端点时，我收到此错误。

MulterError: Unexpected field
    at wrappedFileFilter (C:\React Applications\Nifet Health\node_modules\multer\index.js:40:19)
    at Multipart.<anonymous> (C:\React Applications\Nifet Health\node_modules\multer\lib\make-middleware.js:107:7)
    at Multipart.emit (node:events:520:28)
    at HeaderParser.cb (C:\React Applications\Nifet Health\node_modules\busboy\lib\types\multipart.js:358:14)
    at HeaderParser.push (C:\React Applications\Nifet Health\node_modules\busboy\lib\types\multipart.js:162:20)
    at SBMH.ssCb [as _cb] (C:\React Applications\Nifet Health\node_modules\busboy\lib\types\multipart.js:394:37)
    at feed (C:\React Applications\Nifet Health\node_modules\streamsearch\lib\sbmh.js:248:10)
    at SBMH.push (C:\React Applications\Nifet Health\node_modules\streamsearch\lib\sbmh.js:104:16)
    at Multipart._write (C:\React Applications\Nifet Health\node_modules\busboy\lib\types\multipart.js:567:19)
    at writeOrBuffer (node:internal/streams/writable:389:12)

/ @desc     Create product
// @route    POST /api/products
// @access   Private
const createProduct = asyncHandler(upload.single('image'), async(req, res) => {
    if(!req.body.name || !req.body.price || !req.body.quantity || !req.body.description){
        throw new Error('Please add all fields')
    }
      // Upload image to cloudinary
    const result = await cloudinary.uploader.upload(req.file.path);

    // Create new product
    const product = await Product.create({
        name: req.body.name,
        price: req.body.price,
        quantity:  req.body.quantity,
        description: req.body.description,
        cloudinary_id: result.public_id
        
    })

    res.status(200).json(result)
})

多文件

const multer = require("multer");
const path = require("path");

// Multer config
module.exports = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => {
    let ext = path.extname(file.originalname);  
    if (ext !== ".jpg" && ext !== ".jpeg" && ext !== ".png") {
      cb(new Error("File type is not supported"), false);
      return;
    }
    cb(null, true);
  },
});

Answer 1

在您的请求中，缺少文件的字段名称。 它必须与您在upload.single('<fieldName>')中设置的字符串匹配。

因此，在您的邮递员示例中，将image设置为文件的名称。

它还在文档中提到：

在上传功能中使用表单中的名称字段值非常重要。 这告诉 multer 它应该在请求的哪个字段中查找文件。如果这些字段在 HTML 表单和您的服务器上不同，您的上传将失败