Как загрузить несколько изображений в S3 из одной формы и получить оба URL - PullRequest
Новая
       13

Как загрузить несколько изображений в S3 из одной формы и получить оба URL

0 голосов
/ 04 апреля 2019

Итак, я пытаюсь использовать одну форму для двух загрузок файлов из двух полей ввода вместе с некоторыми другими данными, загрузки изображений в корзину 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-адрес. Любая помощь будет оценена.

...