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

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

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

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

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

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

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

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

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

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

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

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

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

Хорошо ли работает https://www.filepicker.com?


javascript amazon-s3 html upload filepicker.io
person Anatoly    schedule 24.08.2015    source источник
comment
Мне нужно немного больше изучить, но не приведет ли client_body_in_file_only к большему количеству обращений к диску и, следовательно, к снижению производительности? В документах Nginx говорится, что его следует использовать в первую очередь для отладки.   -  person aergistal    schedule 27.08.2015
comment
@aergistal нет, у нас он работает много лет, все идеально. Я разговаривал с разработчиками основной команды Nginx, они подтвердили, что он довольно стабилен для рабочей нагрузки.   -  person Anatoly    schedule 27.08.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я использую FilePicker уже 2 года, и, без сомнения, он того стоит. не пытайтесь управлять загрузкой файлов (с диска Google, с ios, с моей камеры, из дропбокса...) Filepicker справляется с этим очень хорошо и предоставляет вам готовый к использованию URL-адрес. Тратьте больше времени на свой основной бизнес, загрузку файлов очень легко делегировать

person 131    schedule 30.08.2015

arrow_upward
0
arrow_downward

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

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

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

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

Аналогичный вопрос по SO: загрузки HTML5 и Amazon S3 Multi-Part

РЕДАКТИРОВАТЬ

  • операции с изображениями, такие как обрезка и изменение размера, могут выполняться с помощью холста. Просто загрузите локальное изображение в элемент холста, внесите необходимые изменения, а затем вы сможете сгенерировать поток данных изображения jpeg/png, используя canvas.toDataUrl.
  • Предварительный просмотр PDF возможен, существует библиотека PDF.js, которая может преобразовать локальный файл PDF в холст
  • Насколько я знаю, нет возможности конвертировать видео на стороне клиента.
person Lukas Kral    schedule 28.08.2015
comment
Это решает, но только одну конкретную проблему с загрузкой на стороне клиента, а как насчет всего остального? - person Anatoly; 28.08.2015
comment
только что добавил некоторую информацию об обрезке изображения и предварительном просмотре PDF - person Lukas Kral; 31.08.2015