Я довольно новичок в программировании, поэтому я прошу прощения, если есть очень простой ответ на этот вопрос.
Я пытаюсь создать простой веб-сайт, где пользователи могут загружать несколько изображений, чтобы эти изображения отображались где-то еще на веб-сайте. Я делаю это с Mongoose, Express и Node. Я использую Multer в качестве промежуточного программного обеспечения для загрузки, и я также использую анализатор тела, который, как я слышал, может вызвать осложнения при использовании с Multer. Я использую Cloudinary API для загрузки и размещения загруженных изображений.
В идеале пользователь должен выбрать, какие изображения он хочет загрузить, эти изображения будут загружены в Cloudinary, тогда прямая ссылка на каждое изображение будет сохранена в модели Mongoose для этого конкретного поста, а затем каждое изображение будет отображаться с использованием ссылка на изображение, которое было сохранено.
Пока у меня все работает отлично, кроме одного вопроса. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь вставить предоставленную ссылку для загруженного изображения в массив модели Mongoose, я получаю сообщение об ошибке и не могу найти обходной путь.
Вот код, куда изображения загружаются и помещаются в массив:
var imageLength;
var newImage = new Array();
router.post("/", isLoggedIn, upload.array("image"),function(req, res){
image: [];
imageLength = req.files.length;
for(var i = 0; i < imageLength; i++){
cloudinary.uploader.upload(req.files[i].path, function(result) {
// add cloudinary url for the image to the campground object under image property
newImage.push(result.secure_url);
console.log(newImage[i-1]);
console.log(req.body);
req.body.campground.image.push(newImage[i-1]);
console.log(req.body);
});
}
Вот модель Мангуста для "палаточного лагеря":
var mongoose = require("mongoose");
var campgroundSchema = new mongoose.Schema({
name: String,
image: [String],
image_id: [String],
description: String,
author: {
id: {
type: mongoose.Schema.Types.ObjectId,
ref: "User"
},
username: String
},
comments: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Comment"
}
]
});
module.exports = mongoose.model("Campground", campgroundSchema);
И вот ошибка, которую я получаю:
https://res.cloudinary.com/jpisani/image/upload/v1525280683/r1cs0zmjrznopot7lmu9.jpg
{ campground:
{ name: 'g',
description: 'g',
author: { id: 5aaaf25986f338289129f8ea, username: 'frff' } } }
/home/ubuntu/workspace/YelpCamp/v10/routes/campgrounds.js:50
req.body.campground.image.push(newImage[i-1]);
^
TypeError: Cannot read property 'push' of undefined
Как видите, изображение успешно загружено в Cloudinary, и у меня есть прямая ссылка на это изображение. Вопрос заключается в console.log(req.body);. В списке нет ни одного свойства изображения, которое мешает мне вставить ссылку в массив изображений.
Я понимаю, что req.body содержит только то, что было отправлено пользователем, но я не нашел решения этой проблемы каким-либо другим способом.
Вот код для создания новой страницы поста:
<div class="row">
<h1 style="text-align: center">Create a New Campground</h1>
<div style="width: 30%; margin: 25px auto;">
<form action="/campgrounds" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control" type="text" name="campground[name]" placeholder="name">
</div>
<div class="form-group">
<label for="image">Image</label>
<input type="file" id="image" name="image" accept="image/*" multiple required>
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[description]" placeholder="description">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">Submit!</button>
</div>
</form>
<a href="/campgrounds">Go Back</a>
</div>
</div>
Как вы можете видеть, часть загрузки этого кода (находится в центре) называется "image", что должно приводить к появлению массива изображений в модели Mongoose, когда я console.log(req.body);, но, похоже, этого не происходит .
Если какая-либо информация требуется, пожалуйста, спросите, я отвечу быстро. Любая помощь будет принята с благодарностью. Заранее спасибо.
Редактировать : Решение найдено! Для тех, кто сталкивается с этим в будущем, вот ответ на проблему.
//create - add new campground to DB
router.post("/", isLoggedIn, upload.array("campground[image]"), async function(req, res){
// add author to campground
req.body.campground.author = {
id: req.user._id,
username: req.user.username
};
req.body.campground.image = [];
for (const file of req.files) {
let result = await cloudinary.uploader.upload(file.path);
req.body.campground.image.push(result.secure_url);
}
Campground.create(req.body.campground, function(err, campground) {
if (err) {
return res.redirect('back');
}
res.redirect('/campgrounds/' + campground.id);
});
});