В предыдущем уроке
мы узнали о том, как
поддерживается загрузка файлов с помощью многоплатформенного подхода к данным.
В этом упражнении мы будем использовать модуль Multer, о
котором мы говорили в лекции, чтобы наш экспресс-сервер мог
поддерживать загрузку файлов изображений на наш сайт сервера.
Они будут хранить эти файлы изображений в папке public или images.
Эти изображения будут полезны в нашем приложении, когда мы поставляем
изображения для различных блюд или радаров или рекламных акций,
которые мы построили на нашем сервере REST API.
Чтобы начать с этого упражнения,
первым шагом, конечно,
является установка модуля Multer, поэтому в командной строке введите npm установить
multer минус сохранить и на данный момент я использую multer 1.3.1 в этом курсе.
Поэтому, как только мы установили multer модуль,
давайте перейдем к нашему проекту, а затем реализуем новый маршрут, который позволяет нам загружать файлы.
Заходим в проект в папке маршрутов,
добавим новый файл с именем upload router.js.
Этот маршрутизатор, экспресс-маршрутизатор, который мы собираемся реализовать здесь,
является тот, который будет поддерживать загрузку файлов.
Итак, в маршрутизаторе загрузки позвольте мне просто пойти
на блюдо маршрутизатор и скопировать эти первые несколько вещей из маршрутизатора блюдо,
потому что мы в значительной степени собираемся настроить
аналогичную структуру в нашем приложении или маршрутизаторе загрузки.
Итак, позвольте мне скопировать эту часть, а затем мы отредактируем ее.
Итак, в маршрутизаторе загрузки
мне не нужен мангуст, поэтому я собираюсь удалить мангуст, и мне тоже не нужны блюда.
Таким образом, эти два будут удалены, и после этого
нам нужно выразить парсер тела и аутентифицировать.
Теперь мне понадобится модуль multer.
После того, как мы включим модуль multer,
теперь этот маршрутизатор я собираюсь называть это как маршрутизатор загрузки.
Таким образом, будет сказать, загрузить маршрутизатор использовать body parser, а
затем этот, но загрузить маршрутизатор и снова,
не забудьте сказать модуль экспорта, загрузить маршрутизатор здесь.
Итак, для маршрута загрузки маршрутизаторов,
нам нужно добавить различные методы.
Я собираюсь сделать это немного позже, но до этого давайте настроим
multer, чтобы мы могли загружать файлы.
Теперь, по умолчанию, multer можно настроить, просто используя multer в нашем приложении,
но я собираюсь сделать некоторую конфигурацию multer в
этом упражнении, так что мы собираемся
настроить способ multer обрабатывает загрузку файлов.
Таким образом, чтобы использовать multer,
один из вариантов, которые multer принимает для хранения.
Таким образом, multer предоставляет эту функцию хранения диска, которая
позволяет нам определить механизм хранения и здесь мы можем настроить несколько вещей.
Теперь, если это просто вопрос настройки назначения,
вы можете просто сказать dest двоеточие,
а затем указать папку назначения, в которой будут храниться загруженные файлы.
Но здесь я собираюсь сделать дополнительную конфигурацию для multer модуля здесь.
Итак, здесь я собираюсь использовать поддержку многодискового хранилища.
Внутри дискового хранилища
я могу определить пару вариантов здесь.
Параметры, которые я собираюсь определить, будут
назначения, а второй - имя файла.
Итак, две конфигурации, которые я собираюсь поставить на дисковое хранилище.
Назначение, как вы ожидали,
позволяет мне настроить назначение, и это принимает
в качестве конфигурации здесь функцию.
Таким образом, назначение настраивается как функция здесь.
Эта функция получит запрос, а также объект, называемый файлом,
который содержит информацию о файле, который
был обработан multer, а также функцию обратного вызова.
Итак, cb - это функция обратного вызова.
Итак, здесь для назначения
я собираюсь сказать cb null,
второй параметр - папка назначения,
которая может быть выражена как строка, в которой будут храниться файлы.
Итак, здесь, я собираюсь предоставить пункт назначения в виде общедоступных изображений.
Потому что в этом упражнении я буду поддерживать загрузку изображений.
Итак, это часть, которую я собираюсь указать здесь, так что загрузка изображений.
Таким образом, функция обратного вызова, как вы видите, принимает два параметра.
Первый - это, конечно,
ошибка, которая в этом случае я собираюсь установить его в
null, а второй - папка назначения,
где будут храниться мои изображения.
Итак, я могу настроить это, сказав общедоступные изображения косой черты.
Таким образом, в папке изображений
файлы, которые я загружаю, будут сохранены.
Для имени файла также
он получает три параметра,
сообщение запроса, файл и функцию обратного вызова.
Настраивая способ вызова функции обратного вызова,
мы можем указать информацию о имени файла.
Итак, для функции обратного вызова я бы сказал cb null, и здесь нет ошибки.
Затем второй настаивает на имени файла,
который будет использоваться для конкретного файла, который только что был загружен,
как он будет храниться.
Таким образом, этот объект файла, который я получил здесь,
поддерживает набор из нескольких свойств на нем.
Одно из свойств называется, исходное имя.
Таким образом, исходное имя по существу
дает нам исходное имя файла с клиентской стороны, который был загружен.
Я настаиваю на том, что, когда файл будет сохранен на стороне сервера,
файл будет иметь точно то
же имя, что и исходное имя загруженного файла.
Чтобы я мог знать, что я загружаю
точно тот же файл и на стороне сервера, когда
файл загружается, будет храниться с тем же именем.
Теперь, если вы не настраиваете это,
multer по умолчанию даст некоторую случайную строку
в качестве имени файла без расширений.
Таким образом, это может быть не то, что вы были бы счастливы
использовать в этом конкретном упражнении.
Поэтому я явно настраиваю, говоря, что
файл должен храниться с исходным именем загруженного файла.
Мы снова встретим этот объект файла
немного более подробно и посмотрим, как мы
можем использовать информацию из объекта файла немного позже.
Кроме того, я также могу указать фильтр файлов здесь для конфигурации multers.
Фильтр файлов позволит мне указать, какие файлы
я готов загрузить или что я готов принять для загрузки.
Итак, для этого я настрою другую функцию, называемую
фильтром файла изображения const,
и этот я определяю функцию через минуту.
Теперь, для этого, я также могу сохранить это как
хранилище const, потому что мы использовали const для всего,
так что, я просто скажу const storage.
Для фильтра файлов изображений
я скажу, что фильтр файлов изображений const.
Опять же, он получает запрос трех параметров
, объект, объект файла, который содержит информацию
о файле, который был загружен и функцию обратного вызова здесь.
Через функцию обратного вызова
я передаю информацию обратно в мою конфигурацию multer, которая
позволяет мне указать, как я собираюсь хранить эту информацию.
Итак, это будет функция стрелки здесь.
Внутри этой функции стрелки, что я проверю, это то, что
я скажу, если не совпадение исходного имени файла.
Таким образом, исходное имя - строка здесь.
Итак, я пытаюсь увидеть, есть ли совпадение для этой строки, сказав,
что здесь регулярное выражение.
Итак, регулярное выражение, которое я укажу его как косая черта,
точка обратной косой черты, а затем
параметры, которые я собираюсь указать, являются jpg
или jpeg или
png или gif.
Итак, именно так я указываю там регулярное выражение.
Чтобы сказать, что хорошо,
если расширение файла содержит jpg или jpeg или png или gif,
то я буду рассматривать это как файл изображения, и я буду готов принять эти файлы.
Итак, это то, что мы тестируем здесь.
Если это так,
то есть если расширение файла не соответствует ни одной из этих вещей,
поэтому мы не видим, тогда мы скажем, вернем cb.
Затем обратите внимание, что cb первый параметр будет ошибкой.
Итак, я верну новую ошибку,
говоря, что вы можете загружать только файлы изображений.
Итак, мы настаиваем на том, что единственные файлы, которые
они примут, - это файлы изображений, а второй параметр будет ложным.
Поскольку мы предоставляем ошибку в качестве первого параметра,
второй параметр имеет значение false.
В противном случае говорит cb null true.
Таким образом, это означает, что файл, который пытается быть
загружен, соответствует шаблону и поэтому это файл изображения,
и поэтому мы готовы позволить его загрузить.
Две конфигурации, которые мы собираемся поставить в этот multer модуль.
Как настроить multer модуль для использования в нашем приложении?
Здесь я объявлю загрузку const
как multer, а затем я бы указал в скобках, что варианты здесь.
Я могу указать хранилище как функцию хранения, которую я только что определил здесь.
Эта функция хранения в качестве первого параметра,
а второй параметр является файловым фильтром.
Фильтр файлов - это метод,
который позволяет мне указать, какой тип файла я готов принять, а затем я скажу, фильтр файлов изображений.
Просто переключите перенос слов,
чтобы вы могли увидеть всю строку здесь.
Итак, он говорит, что вы можете загружать только файлы изображений, а затем для multer,
я настраиваю фильтр изображений, вот и все.
Мой multer модуль теперь настроен, чтобы позволить мне загружать файлы изображений здесь.
Тогда давайте теперь перейдем и настроим маршрутизатор загрузки.
Для маршрутизатора загрузки
я собираюсь разрешить только метод post здесь.
Таким образом,
методы get, put и delete не будут разрешены на конечной точке маршрутизатора загрузки.
Чтобы помочь мне сделать это,
я пойду на блюдо маршрутизатор, а затем вспомню, что у нас уже был поставлен здесь.
Я собираюсь скопировать это, а затем прийти к
маршрутизатору загрузки, а затем я вставлю эту информацию здесь.
Скажем, если это операция get, то я не буду
поддерживать, что на конечной точке будет ImageUpload.
Получение не будет разрешено,
и аналогичным образом пут не будет разрешен,
а также удаление не будет разрешено.
Я не буду поддерживать ни одну из этих операций, поэтому поставьте, удалите.
Эти трое не будут допущены.
Единственный метод, который я собираюсь поддерживать, - это метод post.
Для метода post
мы собираемся сделать эту аутентификацию до этого момента.
Я просто скопирую это там,
закрою конечную точку и пост.
Когда файл публикуется,
как мы обрабатываем этот пост?
Чтобы обработать сообщение здесь,
мне не нужен следующий для этого.
Теперь, помимо проверки подлинности VerifyUser и проверки подлинности VerifyAdmin,
в той же строке я настрою загрузку.
Итак, напомним, что я настраивал загрузку, используя multer здесь.
Итак, я собираюсь использовать загрузку, которая
поддерживает функцию, называемую как upload.single.
Эта одиночная функция принимает в качестве параметра.
Имя поля формы, которое указывает этот файл,
вы увидите, что через короткое время.
Это поле формы я назову его как ImageFile здесь.
Загрузить один означает, что он позволит мне загрузить только один файл здесь.
Этот единственный файл будет указывать в форме загрузки с клиентской стороны
в многокомпонентной форме, используя это имя там.
Когда файл будет получен в коде,
если я подойду к этому моменту,
эта загрузка позаботится об обработке ошибок, если они есть,
если файл не загружен должным образом и так далее.
Когда вы подойдете к этому моменту,
файл был бы успешно загружен, и
поэтому вам нужно обработать загруженный файл.
На этом этапе мы скажем, res.statusCode -
200, а затем res.SetHeader Content-Type,
«application/json». То, что я собираюсь сделать здесь, это то, что
мы передадим обратно этот объект req.file с сервера обратно клиенту.
Этот объект req.file также будет содержать путь к файлу там, и этот путь может быть
использован клиентом для настройки любого места,
где он должен знать местоположение этого файла изображения.
Например, если вы пытаетесь загрузить блюдо на
стороне сервера и детали блюда на стороне сервера,
вы можете загрузить изображение на сервер, а затем вы
получите URL-адрес этого изображения, а затем вы, возможно,
включите URL-адрес этого изображения в объект json, который описывает блюдо.
Затем загрузите документ dish json на стороне сервера.
Затем req.file передается обратно клиенту,
req.file, как вы увидите, когда мы запускаем этот сервер,
req.file содержит много информации о
файле, который только что был загружен, и поэтому я собираюсь
изучить это, чтобы получить информацию о файле, который я только что загрузил.
Вот как мы собираемся настраивать метод post там, вот и все.
Мой маршрутизатор загрузки готов принять загрузку файлов.
Теперь все, что мне нужно сделать, это перейти к app.js, а затем настроить маршрутизатор загрузки.
Итак, перейдя к app.js
У нас уже есть все эти маршрутизаторы.
Итак, позвольте мне просто скопировать их LeaderRouter, а затем
настроить это как UploadRouter.
Итак, это в файле UploadRouter здесь.
Таким образом, мы настроим UploadRouter, а затем вниз здесь,
мы теперь настроим конечную точку ImageUpload.
Таким образом, конечная точка ImageUpload позволяет мне загрузить файл.
Таким образом, это будет UploadRouter. Вот оно.
Мое приложение теперь настроено на прием файлов.
Итак, давайте сохраним изменения, а затем посмотрим, как работает наше приложение.
Возвращаясь к терминалу,
теперь убедитесь, что ваш сервер MongoDB работает
на одной из вкладок терминала или в одной из команд Windows.
В другом окне,
давайте запустим сервер.
После того, как наш сервер
будет запущен и запущен, мы отправимся в Почтальон, а затем отправить или, скорее, загрузить файл из Почтальона.
Итак, как я уже упоминал,
чтобы загрузить файл,
вы будете использовать multipart/form-data.
Итак, сначала позволь мне войти в систему.
Итак, я сделаю сообщение о входе локальных пользователей,
и я войду в качестве администратора, потому что
только администратор может загружать свои файлы там.
Напомним, что ваш сервер теперь работает на защищенном порту.
Итак, мы скажем https://localhost:3443,
и здесь нет авторизации.
Итак, позвольте мне отключить авторизацию здесь, а затем отправить запрос на сервер.
Итак, в Postman, если это происходит,
что он говорит, что не может получить никакого ответа,
это потому, что вы теперь запускаете безопасный сервер.
Таким образом, в таком случае
Почтальон не примет самозаверяющий сертификат, который поступает.
Таким образом, в этом случае, откройте настройки здесь и в настройках,
в поле «Общие настройки»,
вы увидите эту проверку SSL-сертификата.
Выключите это, чтобы ваш Почтальон был готов принять
самозаверяющий сертификат, который мы установили на стороне сервера.
Таким образом, вы сможете связаться с вашим сервером
в конечной точке входа пользователя https://localhost:3443.
Таким образом, когда мы пытаемся войти сейчас,
вы увидите, что ваш почтовый запрос был
успешно принят сервером,
а затем сервер отвечает с информацией о токене.
Чтобы убедиться, что Postman позволит вам связаться с защищенным сервером,
нажмите «Настройки» и в разделе «Общие»
отключите проверку SSL-сертификата.
Итак, как только вы войдете,
давайте скопируем токен здесь.
Итак, я собираюсь скопировать токен здесь.
Теперь попробуем загрузить файл.
Чтобы загрузить файл, как вы заметили,
нам нужно загрузить этот файл на localhost:3443,
а конечная точка ImageUpload.
Для выполнения ImageUpload здесь,
в заголовке, нам нужно настроить авторизацию.
Итак, мы настроим авторизацию,
а затем вы скажете
«Носитель» и поставите токен, который мы получили.
Итак, сохраните копию токена где-нибудь и скопируйте токен в заголовок.
В теле, чтобы загрузить файл,
мы будем использовать эту форму данных.
Итак, это то, что позволяет вам делать multipart/form-data здесь.
Таким образом, когда вы нажимаете на форму данных,
здесь вы можете предоставить этот файл, который вы хотели загрузить.
Таким образом, когда вы нажимаете новый ключ здесь,
используйте этот ключ как ImageFile.
Напомним, что когда мы настроили метод post на сайте UploadRouter,
мы указали, что загрузить один ImageFile.
Итак, это тот же ключ, который вы собираетесь использовать здесь.
Затем, когда вы даете ключ,
затем вторую часть,
вы установите это из текста в файл здесь.
Таким образом, это то, что позволяет вам указать файл в качестве значения для этого конкретного ключа.
Итак, вы увидите, что эта кнопка надвигается с надписью «Выберите файлы».
Таким образом, вы можете открыть это, а затем выбрать файл, который вы хотите загрузить.
Итак, вот, я собираюсь пойти к моему,
у меня есть файл в одной из моих папок здесь.
Итак, я просто собираюсь перейти к изображениям активов,
а затем мы просто загрузим PNG-файл отсюда.
Итак, вы можете сказать:
«Загрузите конкретный файл».
Таким образом, как вы помните,
мы настроили наш сервер на прием только ImageFile.
Итак, мы скажем: «Загрузите этот конкретный файл».
Затем, когда вы нажимаете на кнопку Отправить,
поэтому обратите внимание, что в теле,
вы должны настроить это с помощью форм-данных.
Итак, multipart/form-data, а затем ключом является ImageFile,
и значением является файл, который вы только что выбрали,
а затем нажмите кнопку Отправить.
Таким образом, когда вы нажимаете на кнопку Отправить,
файл будет загружен на ваш сервер, а
затем сервер ответит обратно с этим объектом.
Итак, это то, что содержится в
объекте req.file, который находится в объекте запроса здесь.
Итак, этот req.file, как вы видите, содержит имя поля.
Имя поля - ImageFile.
Итак, обратите внимание, что это точно то же самое, что и здесь.
Оригинальное имя, поэтому обратите внимание, что выражение originalname содержит alberto.png,
который является файлом, который я загрузил.
Теперь вы можете понять, почему, когда я
настраивал хранилище и имя файла, я устанавливаю file.originalname.
Итак, это то, что будет использоваться там.
Здесь вы можете увидеть тип
кодировки, mimetype, место назначения, в
которую был помещен файл,
и фактический путь к файлу,
относительный путь от корня папки сервера.
Таким образом, этот путь указывает, где файл доступен на стороне сервера.
Таким образом, если вы настраиваете детали блюда или лидера, например,
вы просто используете свойство изображения лидера в images/alberto.png.
Public не должен использоваться в любом случае, потому
что общая папка является той, которая действует как корневая папка для нашего сервера.
Итак, вам просто нужно предоставить эти изображения.alberto.
Таким образом, из этого пути, который вы получаете,
как только файл успешно загружен,
извлеките эту часть, а затем используйте ее для изображения в
документе JSON, который описывает конкретный лидер.
Таким образом, мы загружаем файл.
Теперь, чтобы убедить вас, что штраф действительно загружен,
давайте пойдем к нашему проекту.
Перейдя к нашему проекту,
в общей папке,
вы можете увидеть, что там есть подпапка изображений.
В подпапке изображений
вы можете увидеть файл alberta.png, загруженный там.
Теперь мы можем загрузить больше ImageFiles в наш сервер.
Теперь, если вы попытаетесь загрузить файл, не являющийся образцом,
вы увидите, что сервер не будет принимать
файл, не являющийся образцом, а затем ответит:
«Не удается принять файл, не являющийся образцом».
Таким образом, мы настроим наш экспресс-сервер,
чтобы принимать загрузку ImageFiles с нашей клиентской стороны.
С этим мы завершаем это упражнение.
В этом упражнении мы видели, как мы используем
метамодуль для настройки нашего экспресс-сервера, чтобы
принимать загрузку файлов на конечной точке API /ImageUpload Rest.
Когда мы отправляемся в конечную точку,
файл загружается в указанную папку на сайте сервера.
С этим мы завершаем это упражнение.
Это хорошее время для вас сделать git фиксацию с сообщением «загрузка файла».