同时上传单个和多个图像-multer cloudinary nodejs

问题描述 投票:0回答:1

我正在尝试创建具有两个选项的表单。 1)允许最多上传一个单一的特征图像,以及2)一个附加选项,最多上传4个保存在阵列中的多个“其他图像”。

此逻辑正确吗?

我尝试失败。当我从创建路径中删除“ upload.array('images',4)”以及与“多个图像的数组”相关联的代码时,它仅适用于向Cloudinary上传的单个文件。

以下是我的路线,型号和表单代码:

<---Create New Blog--->

router.post("/", single.upload("image"), upload.array('images', 4), async function(req, res){

    <---Array for multiple images--->

    var images = [];
    var imagesID = [];
    var imageArray = [];
    imageArray = req.files;

    for (var i = 0; i < imageArray.length; i++) {
        let waitforupload = await cloudinary.v2.uploader.upload(imageArray[i].path)
        images.push(waitforupload.secure_url);
        imagesID.push(waitforupload.public_id);
    }
<--- END Array --->

    var coverImage= req.body.coverImage
    var name = req.body.name;
    var desc = req.body.description;
    var author = {
        id: req.user._id,
        username: req.user.username
    }
    var lat;
    var lng;
    var location;

    await geocoder.geocode(req.body.location, function(err, data) {
        console.log("error: " + err)
        if (err || !data.length) {
            req.flash('error', 'Invalid address');
            return res.redirect('back');
        }
        lat = data[0].latitude;
        lng = data[0].longitude;
        location = data[0].formattedAddress;
    })
    var newBlog = { name: name, coverImage: coverImage, coverImageID: coverImageID, images: images, imagesID: imagesID, description: desc, author: author, location: location, lat: lat, lng: lng }
    Blog.create(newPost, function(err, newlyCreated) {
        if (err) {
            console.log(err);
        }
        else {
            console.log(newlyCreated);
            res.redirect("/Blog");
        }
    });

});

型号代码:

var mongoose = require("mongoose");

var BlogSchema = new mongoose.Schema({
   name: String,
   coverImage: String,
   coverImageID: String,
   imagesID: [ { url: String, public_id: String } ],
   location: String,
   lat: Number,
   lng: Number,
   createdAt: { type: Date, default: Date.now },
   author: {
      id: {
         type: mongoose.Schema.Types.ObjectId,
         ref: "User"
      },
      username: String
   }

});

module.exports = mongoose.model("Blog", blogSchema);

表格:

<div class="row justify-content-center">
        <div class="col-md-12 text-center">
            <h1>Add Blog</h1>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-4">
            <form action="/blog" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" name="name" id="name" placeholder="Blog Name">
                </div>
                 <div class="form-group">
                    <label for="image">Cover Image</label>

                    <input class="form-control" type="file" id="image" name="image" accept="image/*">
                </div>
                   <div class="form-group">
                    <label for="image">Other Images</label>

                    <input class="form-control" type="file" id="images" name="images" accept="images/*">
                </div>

                <div class="form-group">
                    <label for="location">Location</label>
                    <input class="form-control" type="text" name="location" id="location" placeholder="New York">
                </div>

                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block" id="newform-submit">Submit!</button>
                </div>

            </form>

            <a href="/blog">Go Back</a>
        </div>
    </div>
node.js mongodb express multer cloudinary
1个回答
0
投票

您可以制作一个可以同时接受单个上载和数组的multer中间件

    //multer configuration
    const imageStorage = multer.diskStorage({
    destination: './imageUploads',

});
const imageUpload =multer({
storage: imageStorage
})

    const uploads = imageUpload.fields([{name:'image',maxCount:1} , {name:'images',maxCount:4}])

然后,此uploads将成为您的中间件

   router.post("/", uploads, async function(req, res){
              your code
  }
© www.soinside.com 2019 - 2024. All rights reserved.