如何上传多张图片到Cloudinary？

Question

我已经实现了一个工作帖子路线，可以在提交时将单个图像上传到 cloudinary。

需要更改什么才能启用多图片上传？如有任何帮助，我们将不胜感激。

我的发帖路线：

app.post("/portfolio/new", upload.single('image'), function(req, res) {
    cloudinary.v2.uploader.upload(req.file.path, function(err, result) {
        if (err) {
            console.log(err);
        }

        req.body.image = result.secure_url;
        console.log(req.body.image);

        Portfolio.create(req.body.project, function(err, newProject) {]
            if (err) {
                console.log(err);
            }
            res.redirect("/portfolio");
        });
    });
});

我的 HTML（带有 EJS）：

<form action="/portfolio/new" enctype="multipart/form-data" method="POST">
    <div>
        Select images: 
        <input type="file" id="image" name="image" accept="image/*" required>
    </div>
</form>

Answer 1

    const cloudinaryImageUploadMethod = async file => {
      return new Promise(resolve => {
          cloudinary.uploader.upload( file , (err, res) => {
            if (err) return res.status(500).send("upload image error")
              resolve({ 
                res: res.secure_url
              }) 
            }
          ) 
      })
    }
    
    router.post("/", upload.array("img", 3 ), async (req, res) => {

        const urls = [];
        const files = req.files;
        for (const file of files) {
          const { path } = file;
          const newPath = await cloudinaryImageUploadMethod(path);
          urls.push(newPath);
        }
        
        const product = new Product({ 
          name: req.body.name,
          productImages: urls.map( url => url.res ),
        });                   
 
     }

//错误：文件不可迭代

Answer 2

要添加到上面，您可以使用此笔进行简单的 javascript 多图像上传器：codepen.io/team/Cloudinary/pen/QgpyOK

这是一个非常奇特的上传器小部件，内置大量选项：codepen.io/dzeitman/pen/EwgjJV

希望这可以帮助其他尝试做类似事情并且只是想看到一些东西起作用的人。

Answer 3

在输入标签中，您应该写...多个。 在帖子路线中，应该写

upload.array("image") 

而不是

upload.single()

在模式文件中，您应该将图像定义为对象数组

i.e. image:[
{
URL: String,
filename: String
}
]