Nano Hash - криптовалюты, майнинг, программирование

Показать изображение после того, как изображение было загружено с помощью CollectionFS

Изображения загружаются в AWS S3 с помощью Meteor.js и CollectionFS. Изображение для загрузки выбирается через поле ввода файла.

'change .upload-input': function() {
    Images.insert(imageFile, function(err, fileObj) {
        Albums.update({_id: albumId}, {$set: { 
            'photo': BASE_URL + fileObj._id + 'photo.jpg'
        }})
    })
}

На той же странице у нас есть img с набором src для отображения URL-адреса только что загруженного изображения.

{{#with album}}
    <img src="{{ photo }}">
{{/with}}

Проблема. Однако страница пытается загрузить это новое изображение до завершения его загрузки в S3 AWS, что приводит к ошибке

GET https://s3.amazonaws.com/myBucket/images/2nkLHcHsqxYrqW3hM-photo.jpg 403 (Forbidden)

Изображение загружается на страницу после обновления страницы.

Как мы можем избежать загрузки изображения до его полной загрузки на S3?

javascript amazon-s3 jquery meteor collectionfs
29.03.2015

Ответы:


1

Боюсь, я не использовал CollectionFS, но, как предложил пользователь 3452997, вы можете использовать API FileReader HTML5 для предварительного просмотра изображения примерно так:

'change .upload-input': function(e) {
    var file = e.target.files[0];
    // Rudimentary check that we're dealing with an image
    if (file && file.type.substring(0,6) === 'image/') {
        var reader = new FileReader();
        reader.onload = function() {
            $('#imgId').attr('src', reader.result);
        }
    }
}

Затем пользователь будет видеть локальную версию изображения до тех пор, пока он не обновит браузер, и к этому времени удаленное изображение, как мы надеемся, будет загружено.

В качестве альтернативы, я думаю, вам нужен какой-то обратный вызов, когда CollectionFS завершает загрузку.

Если CollectionFS этого не обеспечивает, я думаю, что действительно хакерским решением было бы создание помощника, который возвращал бы фотографию после задержки (например, в пределах setTimeout), чтобы у нее было время для загрузки.

29.03.2015
  • Без этого -›reader.readAsDataURL(file); приведенный выше код не будет работать. 08.05.2015

    • 2

    В случае AWS-S3 вы можете попробовать https://atmospherejs.com/edgee/slingshot

    См. раздел «Показывать загруженный файл перед его загрузкой».

    29.03.2015
  • Спасибо за предложение, на самом деле я перехожу от рогатки к collectionfs. Есть ли что-то похожее на uploader.url(true) из Slingshot в collectionfs? 29.03.2015
  • хммм, не знаю, но я думаю, вам следует прочитать об API html5 FileReader: html5rocks .com/ru/tutorials/file/dndfiles Вам, вероятно, нужно прочитать файл на фронте и показать его, затем отправить его на S3, а затем как-то заменить 29.03.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..