Как отправить файл на сервер js

Обновлено: 21.11.2024

С помощью File API, который был добавлен в DOM в HTML5, веб-контент теперь может запрашивать у пользователя выбор локальных файлов, а затем читать содержимое этих файлов. Этот выбор можно сделать либо с помощью элемента HTML, либо путем перетаскивания.

Если вы хотите использовать DOM File API из расширений или другого кода браузера Chrome, вы можете; однако обратите внимание, что есть некоторые дополнительные функции, о которых следует знать. Дополнительные сведения см. в разделе Использование DOM File API в коде Chrome.

Доступ к выбранным файлам

Рассмотрите этот HTML-код:

File API позволяет получить доступ к FileList, содержащему объекты File, представляющие файлы, выбранные пользователем.

Множественный атрибут элемента ввода позволяет пользователю выбирать несколько файлов.

Доступ к первому выбранному файлу с помощью классического селектора DOM:

Доступ к выбранным файлам в событии изменения

Также возможно (но не обязательно) получить доступ к FileList через событие изменения. Вам нужно использовать EventTarget.addEventListener(), чтобы добавить прослушиватель событий изменения, например:

Получение информации о выбранных файлах

Объект FileList, предоставленный DOM, содержит список всех файлов, выбранных пользователем, каждый из которых указан как объект File. Вы можете определить, сколько файлов выбрал пользователь, проверив значение атрибута длины списка файлов:

Отдельные объекты File можно получить, обратившись к списку как к массиву:

Этот цикл перебирает все файлы в списке файлов.

Объект File предоставляет три атрибута, которые содержат полезную информацию о файле.

Имя файла в виде строки, доступной только для чтения. Это просто имя файла, в нем нет информации о пути.

Размер файла в байтах в виде 64-битного целого числа, доступного только для чтения.

Тип MIME файла в виде строки только для чтения или "", если тип не может быть определен.

Пример: Отображение размера файлов

В следующем примере показано возможное использование свойства size:

Использование скрытых элементов ввода файла с помощью метода click()

Вы можете скрыть заведомо уродливый элемент файла и представить собственный интерфейс для открытия средства выбора файлов и отображения файла или файлов, которые выбрал пользователь. Вы можете сделать это, настроив элемент ввода с помощью display:none и вызвав метод click() для элемента.

Рассмотрите этот HTML-код:

Код, обрабатывающий событие клика, может выглядеть следующим образом:

Новую кнопку для открытия средства выбора файлов можно оформить по своему усмотрению.

Использование элемента label для запуска скрытого элемента ввода файла

Чтобы разрешить открытие средства выбора файлов без использования JavaScript (метод click()), можно использовать элемент. Обратите внимание, что в этом случае элемент ввода не должен быть скрыт с помощью display: none (или visible: hidden ), иначе метка не будет доступна с клавиатуры. Вместо этого используйте технику визуального сокрытия.

Рассмотрите этот HTML-код:

Нет необходимости добавлять код JavaScript для вызова fileElem.click() . Также в этом случае вы можете стилизовать элемент метки по своему усмотрению. Вам необходимо предоставить визуальную подсказку для статуса фокуса скрытого поля ввода на его метке, будь то контур, как показано выше, цвет фона или тень блока. (На момент написания статьи Firefox не отображал эту визуальную подсказку для элементов.)

Выбор файлов с помощью перетаскивания

Вы также можете разрешить пользователю перетаскивать файлы в ваше веб-приложение.

Первый шаг — установить зону сброса. То, какая именно часть вашего контента будет принимать перетаскивание, может варьироваться в зависимости от дизайна вашего приложения, но сделать так, чтобы элемент получал события перетаскивания, несложно:

В этом примере мы превращаем элемент с раскрывающимся списком ID в нашу зону перетаскивания. Это делается путем добавления прослушивателей для событий dragenter, dragover и drop.

На самом деле нам не нужно ничего делать с событиями dragenter и dragover в нашем случае, поэтому обе эти функции просты. Они просто останавливают распространение события и предотвращают выполнение действия по умолчанию:

Настоящая магия происходит в функции drop():

Здесь мы извлекаем поле dataTransfer из события, извлекаем из него список файлов, а затем передаем его в handleFiles() . С этого момента обработка файлов будет одинаковой, независимо от того, использовал ли пользователь элемент ввода или перетаскивание.

Пример: отображение эскизов выбранных пользователем изображений

Допустим, вы разрабатываете очередной отличный веб-сайт для обмена фотографиями и хотите использовать HTML для предварительного просмотра эскизов изображений перед их фактической загрузкой пользователем. Вы можете установить свой элемент ввода или зону перетаскивания, как обсуждалось ранее, и заставить их вызывать функцию, такую ​​как функция handleFiles() ниже.

Здесь наш цикл обработки файлов, выбранных пользователем, просматривает атрибут типа каждого файла, чтобы определить, начинается ли его MIME-тип со строки " image/ ".Для каждого файла, который является изображением, мы создаем новый элемент img. CSS можно использовать для создания красивых границ или теней, а также для указания размера изображения, так что здесь этого делать не нужно.

К каждому изображению добавлен объект класса CSS, что упрощает поиск в дереве DOM. Мы также добавляем атрибут файла к каждому изображению, указав файл для изображения; это позволит нам получить изображения для фактической загрузки позже. Мы используем Node.appendChild(), чтобы добавить новую миниатюру в область предварительного просмотра нашего документа.

Далее мы устанавливаем FileReader для обработки асинхронной загрузки изображения и присоединения его к элементу img. После создания нового объекта FileReader мы настраиваем его функцию загрузки, а затем вызываем readAsDataURL(), чтобы запустить операцию чтения в фоновом режиме. Когда все содержимое файла изображения загружается, оно преобразуется в data: URL, который передается обратному вызову onload. Наша реализация этой подпрограммы устанавливает атрибут src элемента img для загруженного изображения, в результате чего изображение появляется в миниатюре на экране пользователя.

Использование URL-адресов объектов

Методы DOM URL.createObjectURL() и URL.revokeObjectURL() позволяют создавать простые строки URL, которые можно использовать для ссылки на любые данные, на которые можно ссылаться с помощью объекта DOM File, включая локальные файлы на компьютере пользователя.

Если у вас есть объект File, на который вы хотите ссылаться по URL-адресу из HTML, вы можете создать для него URL-адрес объекта следующим образом:

URL-адрес объекта — это строка, идентифицирующая объект "Файл". Каждый раз, когда вы вызываете URL.createObjectURL() , создается уникальный URL-адрес объекта, даже если вы уже создали URL-адрес объекта для этого файла. Каждый из них должен быть освобожден. Хотя они освобождаются автоматически при выгрузке документа, если ваша страница использует их динамически, вы должны освободить их явным образом, вызвав URL.revokeObjectURL() :

Пример: использование URL-адресов объектов для отображения изображений

В этом примере используются URL-адреса объектов для отображения миниатюр изображений. Кроме того, он отображает другую информацию о файлах, включая их имена и размеры.

HTML, представляющий интерфейс, выглядит следующим образом:

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

Метод handleFiles() выглядит следующим образом:

Это начинается с получения URL-адреса

с идентификатором fileList . Это блок, в который мы будем вставлять наш список файлов, включая эскизы.

Если объект FileList, переданный в handleFiles(), имеет значение null , мы устанавливаем внутренний HTML-код блока для отображения «Файлы не выбраны!». В противном случае мы начинаем строить наш список файлов следующим образом:

  1. Создайте новый элемент списка ( ) и вставьте его в список.
  2. Создайте новый элемент изображения ( ).
  3. Задайте в качестве источника изображения новый URL-адрес объекта, представляющий файл, с помощью функции URL.createObjectURL() для создания URL-адреса большого двоичного объекта.
  4. Установите высоту изображения 60 пикселей.
  5. Настройте обработчик событий загрузки изображения для освобождения URL-адреса объекта, так как он больше не нужен после загрузки изображения. Это делается путем вызова метода URL.revokeObjectURL() и передачи строки URL-адреса объекта, как указано в img.src .
  6. Добавить новый элемент списка в список.

Вот живая демонстрация приведенного выше кода:

Пример: загрузка выбранного пользователем файла

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

Создание задач загрузки

Продолжая код, создавший миниатюры в предыдущем примере, вспомните, что каждая миниатюра находится в классе obj CSS с соответствующим файлом, присоединенным к атрибуту файла. Это позволяет нам выбрать все изображения, которые пользователь выбрал для загрузки, с помощью Document.querySelectorAll() , например:

Строка 2 извлекает NodeList с именем imgs для всех элементов документа с помощью класса CSS obj . В нашем случае это будут все миниатюры изображений. Когда у нас есть этот список, его легко просмотреть и создать новый экземпляр FileUpload для каждого. Каждый из них обрабатывает загрузку соответствующего файла.

Обработка процесса загрузки файла

Функция FileUpload принимает два входа: элемент изображения и файл, из которого считываются данные изображения.

Перед фактической передачей данных выполняется несколько подготовительных шагов:

Асинхронная обработка процесса загрузки файла

В этом примере, использующем PHP на стороне сервера и JavaScript на стороне клиента, демонстрируется асинхронная загрузка файла.

Пример: использование URL-адресов объектов для отображения PDF

URL-адреса объектов можно использовать не только для изображений! Их можно использовать для отображения встроенных файлов PDF или любых других ресурсов, которые может отображать браузер.

В Firefox, чтобы PDF-файл отображался встроенным в iframe (а не предлагался как загруженный файл), параметр pdfjs.disabled должен иметь значение false .

А вот изменение атрибута src:

Пример: использование URL-адресов объектов с другими типами файлов

Таким же образом вы можете работать с файлами других форматов. Вот как просмотреть загруженное видео:

Написание кода для загрузки изображений на сервер с нуля кажется очень сложной задачей. Я собираюсь сделать очень простую форму загрузки, чтобы продемонстрировать, как работают данные файла и как их можно передавать.

В этом руководстве мы создадим форму загрузки с помощью HTML, отправим файлы с помощью JavaScript, а также обработаем и загрузим их с помощью PHP.

Обратите внимание, что это не полностью функциональный, безопасный, проверенный рабочий код. Он просто предназначен для того, чтобы в простой и понятной форме продемонстрировать, как создать свою первую форму загрузки.

  • Базовые знания HTML.
  • Основные знания синтаксиса и структуры кода PHP
  • Понимание локальных сред PHP. Если вы не знаете, что это значит, прочитайте это руководство по настройке среды MAMP.
  • Создайте простейшую форму с HTML, чтобы получать файлы с локального компьютера.
  • Отправить данные из HTML-формы в PHP-скрипт с ванильным JavaScript.
  • Обработайте данные в сценарии PHP и переместите локальные файлы в каталог uploads/ на сервере.

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

Если вы уже знаете, как использовать PHP и локальные среды, переходите к следующему разделу.

Если вы используете Mac, вы можете создать сервер с помощью одной команды. Чтобы проверить это, создайте файл с именем test.php в выбранном вами каталоге. Я собираюсь создать каталог с именем local . Полный путь будет Users/tania/local .

В приложении "Терминал", которое я открою, нажав ПРОБЕЛ + КОМАНДА и введя "Терминал", перейдите в каталог, в котором вы создали файл.

Если вы работаете в Windows или не хотите использовать командную строку, настройте MAMP.

Создание формы загрузки в HTML

В корне локального сервера создайте файл index.html. Мы просто создадим быстрый скелет.

Давайте добавим веб-форму HTML в тело .

С этого момента мы создаем тип ввода файла, который принимает массив файлов ( files[] ), и мы указываем несколько, чтобы можно было выбрать более одного файла. files[] может иметь любое имя — вы можете использовать uploads[] или images[] , но я назвал его files[] для простоты.

Наконец у нас есть кнопка отправки. Поскольку следующим шагом будет добавление сценария, давайте просто добавим ссылку на файл JavaScript, который мы создадим.

И это все, что нам нужно для представления.

Отправка данных формы через JavaScript

Сейчас нажатие кнопки "Отправить" в форме никуда не приводит. Поскольку у нас нет действия, ведущего к URL-адресу, форма по умолчанию просто отправит сообщение самой себе. Поскольку index.html является файлом html, а не файлом PHP, на этой странице не может выполняться обработка формы. Вместо этого мы отправим форму в PHP через JavaScript.

Создайте файл с именем upload.js.

Во-первых, давайте определим две переменные: URL-адрес, по которому мы хотим отправить данные, и элемент DOM для формы.

Мы собираемся добавить прослушиватель событий для отслеживания отправки формы, но предотвратим срабатывание действия по умолчанию.

Давайте соберем файлы со свойством .files и начнем новый интерфейс FormData().

Для каждого отправленного файла добавьте его в массив files[].

Наконец, используйте встроенный Fetch API, чтобы отправить данные по указанному URL-адресу. Вывести ответ на консоль (в целях тестирования).

Вот завершенный файл upload.js.

Теперь, как мы можем проверить, правильно ли проходят все эти данные? Распечатаем данные файла.

Создайте новый файл с именем process.php и распечатайте содержимое суперглобального массива $_FILES , который будет содержать данные для всех наших файлов.

Получив этот файл, попробуйте загрузить несколько файлов через форму. Я создал phplogo.jpg и testfile1.txt для тестирования и загрузил файл.

В инструментах разработчика в разделе Консоль вы должны увидеть такой ответ:

Инструменты разработчика -> Консоль

Если вы видите статус: 200 , это означает, что файл попал на правильный URL-адрес и URL-адрес существует.

Теперь в инструментах разработчика перейдите на вкладку Сеть. Вы должны увидеть имя файла process.php. Нажмите на файл и нажмите Ответ. Там вы должны увидеть вывод print_r($FILES) . Это будет выглядеть примерно так:

Инструменты разработчика -> Сеть -> Ответ

Теперь мы знаем, что нужные файлы и все связанные с ними данные были обработаны. Успех!

Обработка данных формы с помощью PHP

Теперь, когда мы собрали все файлы из формы и отправили их в process.php с помощью JavaScript, нам нужно переместить данные файла с помощью PHP.

Во-первых, мы хотим убедиться, что код запускается только тогда, когда запрос POST попадает в файл.

Мы также хотим убедиться, что файлы прошли проверку.

Создайте папку в корне вашего проекта под названием uploads. Этот каталог должен иметь права доступа 755 для приема входящих файлов.

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

Поскольку пользователь может загружать несколько файлов, мы создадим переменную $all_files, получим количество загружаемых файлов и создадим цикл for.

Теперь для каждого файла мы получим имя файла, данные временного файла, тип, размер и расширение.

Теперь мы можем установить несколько правил для файлов. Если тип файла отсутствует в одобренном списке расширений или файл слишком велик, мы добавим его в массив ошибок. Я установил размер файла 2 мегабайта.

Если ошибок не было, мы можем продолжить и переместить файл в папку для загрузки с помощью команды move_uploaded_file.

Теперь мы можем закрыть цикл for и распечатать ошибки. Это будет отображаться на вкладке сети, которую мы использовали ранее, чтобы увидеть вывод $_FILES .

Соедините все вместе, и вот вам process.php.

Теперь проверьте это. Если вы используете форму для загрузки файлов, вы увидите их в папке загрузок. Если вы попытаетесь загрузить слишком большой файл или файл неправильного типа, вы увидите ошибки в ответе Сеть.

Поздравляем, вы успешно создали работающую форму загрузки. Это захватывающий небольшой процесс, если вы никогда раньше не загружали файл или не использовали суперглобальную переменную $_FILES.

Полный исходный код находится на GitHub.

Обратите внимание, что это не полный и безопасный производственный процесс. Вот несколько моментов, которые следует учитывать:

  • Проверка на стороне JavaScript отсутствует. Перед отправкой пользователю должно быть показано сообщение об ошибке, если его файл имеет неправильный тип.
  • Работа с несколькими файлами с одинаковыми именами.
  • Этот метод обработки ошибок предназначен только для процесса разработки.

Спасибо, что прочитали. Я также могу рассказать о загрузке на Amazon S3 и/или DigitalOcean Spaces, если есть интерес.

Сторонние пакеты, компиляторы и сборщики — это волшебство за кулисами. Из-за нехватки времени и огромной конкуренции мы не настолько беспокоимся о низкоуровневых вещах, чтобы знать, что именно происходит за кулисами в этих сторонних пакетах.

В этой статье мы с нуля создадим службу загрузки файлов с помощью ванильного JavaScript. Цель состоит в том, чтобы создать его без внешних библиотек, чтобы понять некоторые основные концепции JavaScript. Мы будем читать файл, загруженный пользователем на интерфейсе, и передавать его по частям на сервер, сохраняя его там.

Вот краткий обзор того, что мы будем делать:

Оглавление

Настройка сервера Node.js

Во-первых, нам нужно создать новую папку для проекта.

После этого нам нужно создать файл index.js, который будет точкой входа нашего внутреннего сервера.

Мы сделали специальное демо для .
Нет, правда. Нажмите здесь, чтобы проверить это .

Настройка внешнего интерфейса

Следующий шаг – настройка внешнего интерфейса. Поскольку мы не делаем ничего необычного, мы создадим базовый HTML-файл с файлом ввода и кнопкой загрузки, которая инициирует процесс загрузки при нажатии. Там будет крошечный текст статуса, который объявит статус загрузки файла.

В vanilla JS, чтобы добавить действие при нажатии любой кнопки, мы можем просто подключить прослушиватель событий.

Пользователи могут выбрать файл и загрузить его, нажав кнопку загрузки. Легко-легко!

Чтобы использовать этот HTML-файл при вызове домашнего маршрута, нам нужно отправить этот файл из серверной части. Самый простой подход описан ниже.

Читать содержимое файла во внешнем интерфейсе

Поскольку наш внутренний сервер запущен и работает, нам нужен способ чтения файла на внешнем интерфейсе. Для этого мы будем использовать объект FileReader. Он позволяет веб-приложениям асинхронно считывать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, используя объекты File или Blob для указания файла или данных для чтения.

Синтаксис для чтения файла на стороне клиента с использованием объекта FileReader следующий.

Мы можем получить доступ к выбранным входным файлам в поле файлов для ввода. В настоящее время мы создаем его только для загрузки одного файла, но позже мы можем расширить его и для загрузки нескольких файлов.

Чтобы прочитать файл, FileReader предоставляет несколько методов.

    FileReader.readAsArrayBuffer() — прочитать файл как буфер массива

FileReader.readAsBinaryString() — прочитать файл в необработанных двоичных данных

FileReader.readAsDataURL() — читает файл и возвращает результат в виде URL-адреса данных

FileReader.readAsText() — если нам известен тип файла как текст, этот метод полезен

В нашем случае мы будем использовать метод readAsArrayBuffer для чтения файла в байтах и ​​его потоковой передачи на серверную часть по сети.

Чтобы отслеживать чтение файла на стороне клиента, FileReader предоставляет пару прослушивателей событий, таких как onload , onprogress и т. д.

Наша цель — прочитать файл, разбить его на части и загрузить в серверную часть, поэтому мы будем использовать событие onload, которое запускается после завершения чтения файла.

Вы можете задаться вопросом, почему мы не используем метод onprogress, чтобы сделать приложение полностью потоковой загрузкой файлов? Но проблема с методом onprogress заключается в том, что он не сообщает новый кусок чтения, он сообщает полные данные, прочитанные до сих пор. Итак, мы используем метод onload.

После того, как файл полностью прочитан, мы разделяем его на небольшие фрагменты и передаем в серверную часть.

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

Разделить и передать файл фрагментами на серверную часть

Иногда размер файла может быть большим, поэтому не рекомендуется отправлять весь файл сразу. Некоторые прокси-серверы, такие как Nginx, могут заблокировать его, потому что он кажется вредоносным.

Итак, мы будем разбивать этот файл на куски размером примерно 5000 байт и отправлять их на сервер один за другим.

Если мы внимательно посмотрим на параметр события, мы обнаружим, что после того, как он прочитает файл, мы можем получить доступ к содержимому файла в виде буфера массива в поле event.target.result.

Мы собираемся разделить буфер массива этого файла на куски по 5000 байт.

Теперь нам нужно отправить эти фрагменты в серверную часть. Мой старый друг fetch спешит на помощь, чтобы поразить внутренний сервер.

Прежде чем мы отправим фрагменты в серверную часть, нам нужно убедиться, что мы делаем это по порядку, иначе файл будет поврежден.

Второе — использовать асинхронное ожидание при загрузке, потому что мы не хотим перегружать внутренний сервер запросами.

Как видите, мы добавили имя файла в качестве параметра запроса, и вы можете задаться вопросом, почему мы также отправляем имя файла. Видите ли, все вызовы API к внутреннему серверу не имеют состояния, поэтому, чтобы добавить содержимое в файл, нам нужен уникальный идентификатор, который в нашем случае будет именем файла.

Поскольку пользователь может захотеть загрузить файл с тем же именем, чтобы убедиться, что серверная часть работает должным образом, нам нужен уникальный идентификатор. Для этого мы используем эту красивую однострочную строку:

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

Получить фрагменты и сохранить их на сервере

Поскольку мы полностью настроили внешний интерфейс, следующим шагом будет прослушивание фрагментов файлов и запись их на сервер.

Чтобы извлечь имя файла из параметров запроса, мы используем приведенный ниже фрагмент кода.

Итак, наш окончательный код выглядит так:

Заключение

Мы узнали, как создать службу загрузки файлов с помощью vanilla JS. Очевидно, что это не самая эффективная реализация, но этого более чем достаточно, чтобы дать вам четкое представление о паре основных концепций.

Мы можем расширить его, чтобы отображать индикатор выполнения во время загрузки, повторять загрузку фрагмента в случае сбоя, загружать несколько файлов, загружать несколько фрагментов одновременно и т. д.

Я активен в Твиттере как the2ndfloorguy и хотел бы услышать ваше мнение. И если вас интересуют другие мои статьи, вы можете найти их здесь.

LogRocket: легче отлаживать ошибки JavaScript благодаря пониманию контекста

Отладка кода всегда утомительна. Но чем лучше вы понимаете свои ошибки, тем легче их исправить.

LogRocket позволяет вам понять эти ошибки новыми и уникальными способами. Наше решение для мониторинга внешних интерфейсов отслеживает взаимодействие пользователей с вашими внешними интерфейсами JavaScript, чтобы дать вам возможность узнать, что именно пользователь сделал, что привело к ошибке.

LogRocket записывает журналы консоли, время загрузки страниц, трассировку стека, медленные сетевые запросы и ответы с заголовками и телами, метаданными браузера и пользовательскими журналами. Понимание влияния вашего кода JavaScript никогда не будет таким простым!

Multer — это ПО промежуточного слоя Node.js для обработки данных из нескольких частей и форм, которое значительно упрощает кропотливый процесс загрузки файлов в Node.js. В этой статье мы узнаем назначение Multer при обработке файлов в отправленных формах. Мы также изучим Multer, создав мини-приложение с внешним и внутренним интерфейсом для тестирования загрузки файла. Начнем!

Оглавление

Управление пользовательским вводом в формах

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

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

При отправке форм, содержащих текстовые данные, серверу, в нашем случае Node.js, требуется меньше работы. Используя Express, вы можете легко получить все входные данные, введенные в объект req.body. Однако отправка форм с файлами немного сложнее, поскольку они требуют дополнительной обработки, и здесь на помощь приходит Multer.

Кодирование и загрузка форм с помощью Multer

Все формы включают атрибут enctype, который указывает, как данные должны быть закодированы браузером перед их отправкой на сервер. Значение по умолчанию — application/x-www-form-urlencoded, которое поддерживает буквенно-цифровые данные. Другой тип кодирования — multipart/form-data , который включает загрузку файлов через формы.

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

Приведенный выше код отправляет данные формы по пути /upload_files вашего приложения. Второй — с помощью FormData API. API FormData позволяет нам создать форму multipart/form-data с парами ключ-значение, которые можно отправить на сервер. Вот как это используется:

При отправке таких форм сервер обязан правильно проанализировать форму и выполнить окончательную операцию с данными.

Мультер: обзор

Multer — это промежуточное ПО, предназначенное для обработки multipart/form-data в формах. Он похож на популярный body-parser Node.js, который встроен в промежуточное ПО Express для отправки форм. Но Multer отличается тем, что поддерживает составные данные, обрабатывая только составные формы/данные формы.

Мы сделали специальное демо для .
Нет, правда. Нажмите здесь, чтобы проверить это .

Multer выполняет работу анализатора тела, присоединяя значения текстовых полей к объекту req.body. Multer также создает новый объект для нескольких файлов, req.file или req.files, который содержит информацию об этих файлах. Из файлового объекта вы можете выбрать любую информацию, необходимую для публикации файла в API управления мультимедиа, например Cloudinary.

Теперь, когда мы понимаем важность Multer, мы создадим небольшой пример приложения, чтобы показать, как внешнее приложение может одновременно отправлять в форме три разных файла и как Multer может обрабатывать файлы на серверной части. сделать их доступными для дальнейшего использования.

Создание приложения с поддержкой Multer

Мы начнем с создания внешнего интерфейса с использованием стандартного HTML, CSS и JavaScript. Конечно, вы можете легко использовать любую платформу, чтобы следовать ей.

Создание нашего внешнего интерфейса

Сначала создайте папку с именем file-upload-example , а затем внутри нее создайте еще одну папку с именем frontend. В папке внешнего интерфейса у нас будет три стандартных файла: index.html, styles.css и script.js:

Обратите внимание, что мы создали ярлык и ввод для вашего имени, а также для выбора файлов . Мы также добавили кнопку «Загрузить».

Далее мы добавим CSS для оформления:

Ниже приведен скриншот веб-страницы на данный момент:

Как видите, созданная нами форма принимает два входных параметра: имя и файлы . Множественный атрибут, указанный во входных файлах, позволяет нам выбрать несколько файлов.

Далее мы отправим форму на сервер, используя приведенный ниже код:

Есть несколько важных моментов, которые должны выполняться при использовании script.js. Сначала мы получаем элемент формы из DOM и добавляем к нему событие отправки. После отправки мы используем preventDefault, чтобы предотвратить действие по умолчанию, которое браузер будет выполнять при отправке формы, которое обычно перенаправляет на значение атрибута действия. Затем мы получаем имя и элемент ввода файлов из DOM и создаем formData.

С этого момента мы добавим значение введенного имени с помощью ключа имени к formData . Затем мы динамически добавляем несколько выбранных файлов в formData, используя ключ файлов .

Примечание: если нас интересует только один файл, мы можем добавить files.files[0] .

Настройка сервера

Для нашей демонстрации мы создадим серверную часть с помощью Node.js и Express. Мы настроим простой API в upload_files и запустим наш сервер на localhost:5000. API получит запрос POST, содержащий входные данные из отправленной формы.

Чтобы использовать Node.js для нашего сервера, нам нужно настроить базовый проект Node.js. В корневом каталоге проекта в терминале по адресу file-upload-example выполните следующий код:

Приведенная выше команда создает базовый файл package.json с некоторой информацией о вашем приложении. Далее мы установим необходимую зависимость, для наших целей это Express:

Далее создайте файл server.js и добавьте следующий код:

API настраивается с помощью app.post('/upload_files', uploadFiles) . uploadFiles — это контроллер API. Как видно выше, мы только выходим из req.body , который должен быть заполнен epxress.json() . Мы проверим это на примере ниже.

Запуск анализатора тела в Express

В терминале запустите node server, чтобы запустить сервер. Если все сделано правильно, вы увидите следующее в своем терминале:

Теперь вы можете открыть интерфейсное приложение в браузере. Заполните оба входа в интерфейсе, имя и файлы, затем нажмите «Отправить». В вашем бэкенде вы должны увидеть следующее:

Код на изображении выше означает, что объект req.body пуст, чего и следовало ожидать. Если вы помните, body-parser не поддерживает составные данные. Вместо этого мы будем использовать Multer для разбора формы.

Установить и настроить Multer

Установите Multer, выполнив в терминале следующую команду:

Чтобы настроить Multer, добавьте в начало server.js следующее:

Хотя Multer имеет много других параметров конфигурации, нас интересует только свойство dest для нашего проекта, которое указывает каталог, в котором Multer будет сохранять закодированные файлы.

Далее мы будем использовать Multer для перехвата входящих запросов к нашему API и анализа входных данных, чтобы сделать их доступными для объекта req:

Для обработки нескольких файлов используйте upload.array . Для одного файла используйте upload.single . Обратите внимание, что аргумент файлов зависит от имени ввода, указанного в formData .

Multer добавит текстовые входы в req.body и добавит файлы, отправленные в массив req.files. Чтобы увидеть, как это работает в терминале, введите текст и выберите несколько изображений во внешнем интерфейсе, затем отправьте и проверьте зарегистрированные результаты в своем терминале.

Как видно из приведенного ниже примера, я ввел изображения в поле ввода текста и выбрал файлы PDF, SVG и JPEG. Ниже приведен скриншот зарегистрированного результата:

Для справки: если вы хотите загрузить файл в хранилище, такое как Cloudinary, вам придется отправить файл непосредственно из папки загрузки. Свойство path показывает путь к файлу.

Заключение

Только для ввода текста объекта bodyParser, используемого внутри Express, достаточно для анализа этих вводов. Они делают входные данные доступными в виде пары ключ-значение в объекте req.body. Multer удобен, когда формы содержат составные данные, включая текстовые входные данные и файлы, которые библиотека body-parser не может обработать.

С помощью Multer вы можете обрабатывать один или несколько файлов в дополнение к текстовому вводу, отправляемому через форму. Помните, что вы должны использовать Multer только при отправке файлов через формы, потому что Multer не может обрабатывать любые формы, которые не являются составными.

В этой статье мы рассмотрели отправку форм, преимущества парсеров тела на сервере и роль, которую Multer играет в обработке входных данных формы. Мы также создали небольшое приложение с использованием Node.js и Multer, чтобы увидеть процесс загрузки файлов.

Что касается следующих шагов, вы можете просмотреть загрузку в Cloudinary с вашего сервера, используя Справочник по API загрузки. Надеюсь, вам понравилась эта статья! Удачного кодирования!

Только 200

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

LogRocket позволяет вашему приложению записывать базовые показатели производительности, такие как время загрузки страницы, время до первого байта, медленные сетевые запросы, а также регистрировать действия/состояние Redux, NgRx и Vuex. Начать мониторинг бесплатно.

Читайте также: