Выбора файлов? Загрузка больших файлов через HTML5 в S3 без бэкэнда

загрузка файлов с помощью multipart / form-data прямо вперед и работает хорошо большую часть времени, пока вы не начали фокусироваться на загрузке больших файлов. Если мы ... --1-->внимательно что происходит во время загрузки файла:

  • клиент отправляет запрос POST с содержимым файла в теле

  • веб-сервер принимает запрос и инициирует передачу данных (или возвращает ошибку 413 если размер файла превышает limit)

  • веб-сервер начинает заполнять буферы (зависит от размера файла и буферов), хранить его на диске и отправлять его через сокет/сеть на сервер

  • back-end проверяет аутентификацию (посмотрите, как только файл загружен)

  • back-end читает файл и сокращает несколько заголовков Content-Disposition, Content-Type, снова сохраняет его на диске back-end выполняет все, что вам нужно сделать с файл

чтобы избежать таких накладных расходов, мы сбрасываем файл на диск (nginx client_body_in_file_only) и управляем обратным вызовом, чтобы отправить дальше по линии. Затем работник очереди берет файл и делает то, что требуется. Он работает для межсерверной связи довольно гладко, но мы должны решить аналогичную проблему с загрузкой на стороне клиента.

У нас также есть клиентское решение для загрузки S3. Не происходит никакого взаимодействия. Для загрузки видео мы управляем видео для преобразования в формат h.264 Baseline / AAC с Zencoder.

В настоящее время мы используем модифицированный Flash uploader на основе s3-swf-загрузить-плагин с комбинацией ZENCODER JS SDK, которая действительно эффективна, но использует Flash.

вопрос. Как достичь той же цели с помощью HTML5 file uploader? Делает Filepicker.io и Zencoder решить проблему? Каков рекомендуемый способ управления загрузкой файлов HTML5 без взаимодействия с фоном?

требования следующее:

  • HTML5, не flash
  • для загрузки видео с последующей обработкой, чтобы сделать его совместимым с HTML5-плеерами и мобильными
  • для загрузки изображений с последующей обработкой (изменение размера, обрезка, поворот)
  • для загрузки документов, таких как PDF с функцией предварительного просмотра

делает https://www.filepicker.com Сделать хорошую работу?

7
amazon-s3 filepicker.io html5 javascript upload

3 ответов

требования следующие:

HTML5, а не flash

Filepicker теперь поддерживает полный отзывчивый виджет, который является чистым html и css.

для загрузки видео с последующей обработкой, чтобы сделать его совместимым с HTML5-плеерами и мобильными

Filepicker теперь предлагает возможность перекодировать большинство видеоформатов на h264 & webm для мобильных устройств воспроизведение. https://www.filepicker.com/documentation/file_processing/video_conversion/video

для загрузки изображений с последующей обработкой (изменение размера, обрезка, поворот)

Filepicker предлагает обрезку и поворот в новом виджете, а также изменение размера, заточку и водяные знаки через API.

для загрузки документов, таких как PDF с функцией предварительного просмотра

мы предлагаем возможность конвертирования из 19 разных файлов форматы различные форматы. https://www.filepicker.com/documentation/file_processing/document_conversion/document

1

Я использую filepicker в течение 2 лет, и, без сомнения, это стоит того. не пытайтесь управлять загрузкой файлов (с google Диска, из ios, с моей камеры, из dropbox...) Filepicker обрабатывает это очень хорошо и предоставляет вам готовый url-адрес. Потратьте больше времени на работу над своим основным бизнесом, загрузка файлов действительно легко делегировать

1

для загрузки больших файлов в S3 есть REST API для составной загрузки, который работает следующим образом

  1. инициировать отправку
  2. загрузить содержимое файла разделить на несколько запросов
  3. завершить загрузку

API также доступен для вызова из javascript, и загруженный файл можно разделить на несколько запросов с помощью файл/Blob slice API

единственная проблема в том, что возможность аутентификации на S3 из javascript вам нужно передать свои данные аутентификации. Это обычно решается некоторым промежуточным слоем, таким как PHP, поэтому данные аутентификации не хранятся в файлах javascript.

аналогичный вопрос на SO:HTML5 и Amazon S3 мульти-часть загрузки

редактировать

  • операции с изображениями, такие как обрезка и изменение размера, могут выполняться canvas. Просто загрузите локальное изображение в элемент canvas, внесите необходимые изменения и затем вы можете генерировать поток данных изображений jpeg/png с помощью холст.toDataUrl метод.
  • предварительный просмотр PDF возможен, есть в формате PDF.js lib, который может отображать локальный PDF-файл в холст
  • AFAIK нет способа сделать преобразование видео на стороне клиента
0