使用 Multer Storage Cloudinary 从同一表单上传音频和图像

Question

我必须创建一个使用 Multer Storage Cloudinary 将 1 个音频文件和 1 个图像（调整大小）上传到 Cloudinary 的路由，并将 URL 和名称保存在我的 mongo 数据库中。 当我尝试上传音频文件时出现错误“无效的图像文件”（即使我删除 transformation 并在 allowedFormats 中添加“mp3”。

云代码：

const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_KEY,
    api_secret: process.env.CLOUDINARY_SECRET
});

const storage = new CloudinaryStorage({
    cloudinary,
    params: {
        folder: 'nono',
        // transformation: [
        //     {width: 500, height: 500, crop: "fill"}
        // // ],
        // allowedFormats: ['jpeg', 'png', 'jpg', 'mp3']
    }
});

module.exports = { cloudinary, storage }

路线代码：

router.route("/")
    .get(catchAsync(sounds.index));
    .post(isLoggedIn, upload.fields([{ name: 'sound[audio]', maxCount: 1 }, { name: 'sound[image]', maxCount: 1 }]), joiValidationSounds, catchAsync(sounds.newSound));

---

module.exports.newSound = async (req, res) => {
    const sound = new Sound(req.body.sound);
    console.log(req.files)
    sound.image.url = req.files["sound[image]"][0].path;
    sound.image.filename = req.files["sound[image]"][0].filename;
    sound.audio.url = req.files["sound[audio]"][0].path;
    sound.audio.filename = req.files["sound[audio]"][0].filename;
    sound.author = req.user._id;
    await sound.save();
    req.flash("success", "Se ha añadido un nuevo sonido.");
    res.redirect(`/sounds/categories/:category/${sound._id}`);
}

表格代码：

<form action="/sounds" method="POST" novalidate class="validated-form" enctype="multipart/form-data">
        <div class="row mb-3">
            <label for="audio" class="col-sm-2 col-form-label">Audio:</label>
            <div class="col-sm-10">
                <input type="file" name="sound[audio]" id="audio">
            </div>
        </div>
        
        <div class="row mb-3">
            <label for="image" class="col-sm-2 col-form-label">Imagen:</label>
            <div class="col-sm-10">
                <input type="file" name="sound[image]" id="image">
            </div>
        </div>

        <button type="submit" class="btn btn-success">Crear</button>
        <button type="reset" class="btn btn-success">Limpiar</button>
    </form>

我可以毫无问题地上传 2 张图片。我还检查了 Cloudinary 是否支持 mp3 文件。

编辑：我设法用resource_type: 'video', allowedFormats: ['mp3'], 和2 个不同的存储上传了音频。 但是现在当我尝试同时上传两者时，我收到了“意外字段”错误。

新代码：

const storageAudio = new CloudinaryStorage({
    cloudinary: cloudinary,
    params: {
        folder: 'nono',
        format: 'mp3',
        resource_type: 'video',
        allowedFormats: ['mp3'],
    }
});

const storageImage = new CloudinaryStorage({
    cloudinary: cloudinary,
    params: {
        folder: 'nono',
        transformation: [
            {width: 500, height: 500, crop: "fill"}
        ],
        format: 'jpg',
        resource_type: 'image',
        allowedFormats: ['jpeg', 'png', 'jpg']
    }
});

module.exports = { cloudinary, storageImage, storageAudio };

const multer = require("multer");
const { storageImage, storageAudio  } = require("../cloudinary");
const uploadAudio = multer({ storage: storageAudio });
const uploadImage = multer({ storage: storageImage });

router.route("/")
    .get(catchAsync(sounds.index))
    .post(isLoggedIn, 
        // uploadAudio.fields([{ name: 'sound[audio]', maxCount: 1 }]), uploadImage.fields([{ name: 'sound[image]', maxCount: 1 }]),
        uploadAudio.single("sound[audio]"), 
        uploadImage.single("sound[image]"),
        // upload.fields([{ name: 'sound[audio]', maxCount: 1 }, { name: 'sound[image]', maxCount: 1 }]), 
    joiValidationSounds, catchAsync(sounds.newSound)
    );

Answer 1

上传文件到Cloudinary时，上传参数之一是resource_type，告诉Cloudinary如何处理传入的文件。可能的值是“图像”、“视频”、“原始”（非图像、非视频）或“自动”（上传后将打开文件以检查类型）

如果您在上传视频时收到 Invalid image file 错误，很可能意味着上传调用中的 resource_type 设置为“图像”，并查看您正在使用的插件的存储库，即似乎是这样：https://github.com/affanshahid/multer-storage-cloudinary/issues/13

您可能需要联系插件维护者，看看他们是否可以允许在未来版本中覆盖资源类型，或者派生插件以允许在配置中覆盖资源类型

或者，您可以直接使用 Cloudinary 的 SDK 来执行上传，并使用 multer 只是为了使上传的文件可用于您的代码。在这种情况下，Cloudinary SDK 在上传时默认使用 resource_type "auto"，如果需要，您可以在自己的代码中覆盖该值

Answer 2

最后，我找到了一个解决方案（一个存储和一个表单），可以同时上传图像和音频：

1) 将参数设置为 resource_type: 'auto', 和 allowedFormats 为您将上传的所有格式。

const storage = new CloudinaryStorage({
    cloudinary,
    params: {
        folder: 'nono',
        resource_type: 'auto',
        allowedFormats: ['jpeg', 'png', 'jpg', 'mp3'],
        transformation: [
            {width: 500, height: 500, crop: "fill"}
        ]
    }
});

2)使用upload.fields

upload.fields([{ name: 'sound[audio]', maxCount: 1 }, { name: 'sound[image]', maxCount: 1 }]),