如何将多张图片上传到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>

- Ian

---

请按照此教程操作：https://medium.com/the-andela-way/how-to-upload-multiple-images-using-cloudinary-and-node-js-2f053b167b80 - turivishal

@turivishal 谢谢你提供的文章链接，但是我没有足够的经验来重构这个指南中的代码以适应我的需求。作者描述了如何将其作为一个独立的节点应用程序来完成，而不是一个熟悉的HTML表单提交路由。我尝试过了，但是犯了很多错误，没有取得任何进展。 - Ian

嘿 @Ian，你可以从基础开始，观看视频教程并参考Stack Overflow上的问题和演示。请将你的另一个问题作为新问题发布在Stack Overflow上，因为你会得到许多Stack Overflow贡献者的回答。 - turivishal

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 ),
        });                   
 
     }

//错误：文件不可迭代

- Ali Raza

Answer 2

除此之外，您可以使用此笔来实现简单的JavaScript多图像上传器：codepen.io/team/Cloudinary/pen/QgpyOK

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

希望这能帮助其他人尝试类似的操作，并且只想看到一些有效的东西。

- Tessa Mero

Answer 3

在输入标签中，你应该写... multiple。 而在 post 路由中，应该写

upload.array("image") 

替代

upload.single()

在架构文件中，你应该将图片定义为对象数组。

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

- Amar singh