我正在尝试创建具有两个选项的表单。 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>
您可以制作一个可以同时接受单个上载和数组的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
}