Обработка загрузки файлов в формы с помощью Express

Как управлять хранением и обработкой файлов, загруженных через формы, в Express

Это пример HTML-формы, которая позволяет пользователю загружать файл:

<form method="POST" action="/submit-form" enctype="multipart/form-data">
  <input type="file" name="document" />
  <input type="submit" />
</form>

Не забудьте добавитьenctype="multipart/form-data"в форму, иначе файлы не будут загружены

Когда пользователь нажимает кнопку отправки, браузер автоматически создаетPOSTзапрос в/submit-formURL в том же источнике, что и страница. Браузер отправляет содержащиеся данные, а не закодированные, как в обычной форме.application/x-www-form-urlencoded, но, какmultipart/form-data.

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

Вы можете установить его, используя:

npm install formidable

Затем включите его в свой файл Node.js:

const express = require('express')
const app = express()
const formidable = require('formidable')

Теперь вPOSTконечная точка на/submit-formroute, мы создаем новую форму Formidable, используяformidable.IncomingForm():

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
})

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

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req, (err, fields, files) => {
    if (err) {
      console.error('Error', err)
      throw err
    }
    console.log('Fields', fields)
    console.log('Files', files)
    for (const file of Object.entries(files)) {
      console.log(file)
    }
  })
})

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

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('field', (name, field) => {
      console.log('Field', name, field)
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    .on('aborted', () => {
      console.error('Request aborted by the user')
    })
    .on('error', (err) => {
      console.error('Error', err)
      throw err
    })
    .on('end', () => {
      res.end()
    })
})

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

  • file.size, размер файла в байтах
  • file.path, путь к файлу
  • file.name, имя файла
  • file.type, MIME-тип файла

По умолчанию путь к временной папке и может быть изменен, если вы прислушиваетесь кfileBeginмероприятие:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('fileBegin', (name, file) => {
        file.path = __dirname + '/uploads/' + file.name
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    //...
})

Скачать мою бесплатнуюСправочник Express.js


Дополнительные экспресс-руководства: