[MUSIC]
Загрузка файлов является общей функцией, поддерживаемой многими серверами.
Таким образом, когда вы заполняете форму, например, у вас может быть поле,
где вы заполняете имя файла, а затем загружаете этот файл на стороне сервера.
В качестве примера
предположим, что вы загружаете информацию о блюде на сервер.
Затем вы также захотите загрузить соответствующее изображение блюда
на стороне сервера.
Таким образом, в процессе вы сначала загрузите изображение тарелки на серверную сторону,
получите URL-адрес для
этого изображения с серверной стороны, где бы оно ни было загружено и сохранено,
а затем используйте это изображение в документе JSON, который подробно описывает блюдо.
Таким образом, когда клиенты извлекают JSON-документ, описывающий
блюдо, чтобы отобразить пользовательский интерфейс, то из документа JSON они
смогут получить URL-адрес изображения тарелки, которое было загружено на серверную сторону.
А затем используйте его при построении пользовательского интерфейса.
Итак, в примерах, которые мы видели до сих пор, когда мы смотрели на детали
блюда, мы видели, что там есть изображение, заполненное там, которое является строкой, что не
что иное, как URL-адрес для этого изображения, соответствующего этому конкретному блюду.
Или продвижение или читатель, как мы построили на нашем сервере REST API.
Теперь в этой лекции мы собираемся узнать больше о загрузке файлов.
Как это поддерживается на сервере?
И тогда, как мы можем использовать модуль узла
, который позволяет нам поддерживать загрузку файлов.
Загрузка файлов обычно поддерживается через ввод формы.
Поэтому во входных данных, если вы укажете тип
как файл и имя как имя поля там,
то вы сможете предоставить файл, который будет загружен
при нажатии на эту кнопку отправки для этой конкретной формы здесь.
Теперь, когда информация о файле загружается на стороне сервера,
сами данные формы обычно кодируются как
приложение/x-www-form-urlencoded или multipart/form-data.
Таким образом, вы проектируете свою форму, например, вы будете проектировать свою форму с
действием, установленным в /ImageUpload на наклоне REST API,
который будет действовать как конечная точка, к которой вы делаете сообщение изображения.
Таким образом, соответствующий метод будет post, а тип кодировки,
вы установите его в multipart/form-data в вашей форме.
Таким образом, это означает, что элементы формы будут закодированы в тип кодирования,
а затем загружены на серверную сторону.
Загрузка файлов более эффективна с multipart/form-data.
И, следовательно, это предпочтительный подход, который мы используем для загрузки файлов.
Теперь, если вы хотите узнать более подробную информацию о загрузке файлов и
загрузке формы и приложении/x-www-form-urlencoded или
multipart/form-data, то вы можете прочитать HTML5
(Рекомендация W3C), где приведены подробности, а
также соответствующий запрос IETF для комментариев документы.
У меня есть ссылки на них в дополнительных ресурсах, если вы хотите прочитать больше
о фактических подробностях о том, как поддерживаются эти типы кодирования форм.
С нашей точки зрения, когда мы используем multipart/form-data,
когда это включено в
сообщение запроса HTTP, которое собирается на стороне сервера, то в заголовке сообщения запроса
у вас будет тип содержимого, установленный в multipart/form-data.
А затем также граничное значение, установленное таким образом.
Граница разделяет несколько частей тела запроса.
Таким образом, само тело запроса исходящего сообщения запроса будет
разделено на несколько частей.
И каждая часть будет очерчена от предыдущей части
, используя эту границу здесь.
Теперь, чтобы еще больше проиллюстрировать вам детали, я подстроил
сервер, чтобы распечатать эту информацию из входящего сообщения запроса.
Чтобы мы могли изучить это немного более подробно.
Взглянув на детали
конкретного сообщения, которое я отправил от своего почтальона на серверную сторону,
вы можете заметить, что здесь я напечатал заголовки запросов здесь.
И, в частности, в заголовке запроса позвольте мне обратить ваше внимание на этот заголовок
, называемый типом содержимого, который установлен на multipart/form-data.
И тогда обратите внимание, в частности, на границу, определенную здесь
с этим длинным числом.
Таким образом, это заголовок запроса для
входящего сообщения запроса, которое я опубликовал с помощью метода post.
На самом деле, это именно сообщение запроса, которое я буду использовать
в упражнении, которое следует за этой лекцией, чтобы загрузить файл.
Поэтому, когда мы загружаем этот файл там, хорошо, вы заметите, что в
теле запроса, так что здесь я распечатываю тело запроса внизу.
И в теле запроса
вы заметите, что он печатает эту конкретную строку здесь.
И это соответствует границе, которая указана здесь.
Таким образом, эта граница по существу определяет разделение между различными
частями составного тела, которое является частью этого сообщения запроса.
Итак, в теле запроса вы увидите, что это определяется здесь.
Кроме того, вы также укажите тот же Content-Disposition, что и данные формы,
что означает, что они будут интерпретировать это как данные формы и
соответствующее имя a s ImageFile.
И само имя файла с клиентской стороны, который был загружен,
здесь дано само имя файла.
А затем ниже он говорит Content-Type: image/png.
Поэтому я загружаю этот файл изображения PNG здесь.
Итак, это детали, которые описаны здесь.
И по мере прокрутки вниз к самому телу запроса
вы увидите детали того, что включено в тело запроса.
Таким образом, это внутри файла PNG здесь, вы увидите эту информацию в файле PNG.
Поэтому, если вы откроете файл PNG, это то, что вы увидите здесь.
Таким образом, здесь содержится целая куча символов,
которые, очевидно, на экране не могут быть напечатаны.
Таким образом, по мере прокрутки вниз, вы получите весь этот набор информации,
который на самом деле содержится в теле запроса
сообщения запроса, которое загружает этот конкретный файл на сторону сервера.
Таким образом, вы видите, что это тело действительно содержит
закодированную версию изображения там.
И это конец границы для этого тела запроса.
Таким образом, в нашем запросе у нас есть только один файл, включенный здесь.
Вы также можете загрузить несколько файлов, если вы все еще хотите.
Но затем вам нужно настроить модуль npm соответствующим образом, чтобы
принимать несколько файлов.
Итак, вот как ваше тело запроса содержит закодированную версию
изображения, из которой ваш сервер извлечет изображение,
а затем сохранит его в файл с тем же именем файла на стороне сервера.
Так вот как мы будем настраивать наше приложение, серверное приложение,
чтобы сделать в упражнении, которое следует за этой лекцией.
Поэтому я подумал, что это будет интересный
шаг, чтобы показать вам, что именно получает мой сервер.
И это покажет, почему мы указываем здесь эту границу.
И как, внутри самого тела запроса,
мы используем границу для разграничения различных частей тела запроса.
Таким образом, серверная сторона, когда она обрабатывает,
сможет соответствующим образом извлечь данные изображения из тела запроса,
а затем сохранить файл изображения на стороне сервера.
Так же, как я проиллюстрировал в терминале
, что граница отделяет часть запроса многопроходной.
И так вы видели границу, указанную там.
Для работы с данными составной формы, содержащимися в теле запроса,
мы будем использовать модуль NPR, который поддерживает обработку
данных составной формы, включенных в тело запроса.
Он автоматически извлечет все для вас, а
затем загрузит его на два объекта на объекте запроса на стороне сервера.
Таким образом, этот модуль npm называется Multer, который при установке в
вашем серверном приложении и
настройке вашего экспресс-сервера для использования Multer.
Затем вы сможете обработать входящее сообщение запроса, которое
содержит эти multipart/form-данные в сообщении запроса.
Таким образом, Multer - это модуль узла, где это
поможет серверу обрабатывать multipart/form-data.
Это написано поверх другого модуля npm под названием busboy.
Busboy это модуль, который обрабатывает входящие данные HTML-формы, общие данные HTML-формы.
И в частности, Multer наводит на busboy, чтобы вы могли
обрабатывать составные /form-данные на стороне сервера.
Теперь, когда он анализирует эту информацию, Multer будет
загружать входящие данные формы и добавляет объект тела в req.
Таким образом, у вас будет объект req.body, а также объект req.file.
Если вы загружаете один файл, то он продолжит req.file объект.
Затем, если вы настроили Multer для приема нескольких файлов,
вы можете настроить объект req.files.
Объект files будет массивом, который содержит всю информацию для
каждого конкретного файла, который загружается на стороне сервера.
Сам объект файла содержит информацию, которая
суммирует способ сохранения файла на стороне сервера Multer.
С этим быстрым пониманием того, как работает загрузка файлов,
давайте перейдем к упражнению, где мы фактически настроим модуль Multer.
А затем используйте его в нашем экспресс-приложении для обработки загрузки файлов
со стороны клиента.
[ МУЗЫКА]