Итак, я пытаюсь использовать одну форму для двух загрузок файлов из двух полей ввода вместе с некоторыми другими данными, загрузки изображений в корзину S3, получения URL-адресов для обоих изображений и отправки всех данных вместе. в базе данных Монго. У меня проблемы с загрузкой обоих изображений и получением URL-адресов для хранения в переменной.
Я настроил корзину AWS S3 и, используя multer-s3, могу подтвердить, что изображения могут правильно храниться в корзине и что метод post возвращает JSON с соответствующим общедоступным URL-адресом. Я пытаюсь асинхронно загрузить каждое изображение и сохранить его в переменных, прежде чем весь документ будет сохранен в mongoDB.
JS:
$scope.addListing = function (frontURL, backURL) {
$scope.newListing.linkToFrontImage = frontURL;
$scope.newListing.linkToBackImage = backURL;
Listings.create($scope.newListing).then(function (response) {
window.location = 'admin.html';
}, function (error) {
console.log('Failed to add listing:', error);
});
};
$('#cardUpload').submit(function (res) {
var uploadFrontPhoto = $.post("/api/v1/upload", $("#cardFront"), function(data){
**Store returned URL in 'frontURL' var**
});
var uploadBackPhoto = $.post("/api/v1/upload", $('#cardBack'), function(data){
**Store returned URL in 'backURL' var**
});
uploadFrontPhoto
.then(uploadBackPhoto)
.then($scope.addListing(frontURL, backURL), function (error) {
console.log('Failed to add listing: ', error);
});
return true;
});
HTML:
<form id="cardUpload" method="post" enctype="multipart/form-data">
<label>Card front image</label>
<p><input type="file" accept="image/*" id="cardFront" name='image' /></p>
<label>Card back image</label>
<p><input type="file" accept="image/*" id="cardBack" name='image' /></p>
<input type="submit" value="Add">
</form>
multer-s3:
const upload = multer({
storage: multerS3({
s3,
bucket: '*bucketname*',
acl: 'public-read',
contentType: multerS3.AUTO_CONTENT_TYPE,
metadata: function (req, file, cb) {
cb(null, { fieldName: file.fieldName });
},
key: function (req, file, cb) {
cb(null, Date.now().toString())
}
})
})
router.post('/api/v1/upload', upload.array('image'), function (req, res, next) {
res.redirect("/admin.html");
return res.json({ 'imageUrl': req.files.location });
});
Текущий код не помещает изображения в корзину S3. Если я добавлю «action = '/ api / v1 / upload'» в форму HTML, оба изображения будут отображаться как загруженные в корзину, хотя я не уверен, что это лучший подход, если я пытаюсь асинхронно получить URL-адрес. Любая помощь будет оценена.