Как загружать файлы на сервер с помощью JavaScript

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

Допустим, у нас есть элемент ввода HTML-файла:

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

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

  fetch('/saveImage', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(data.path)
  })
  .catch(error => {
    console.error(error)
  })
}

document.querySelector('#fileUpload').addEventListener('change', event => {
  handleImageUpload(event)
})

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

С этим мы сделаем то, что нам нужно, например, обновим интерфейс с изображением.

Обработка загрузки файлов на стороне сервера с помощью Node.js

Серверная часть подробно описана ниже. Я использую Node.js с помощью платформы Express для обработки запроса.

Установите модуль экспресс-загрузка файлов npm:

npm install express-fileupload

и добавьте его в свое промежуточное программное обеспечение:

import fileupload from 'express-fileupload'

//or

const fileupload = require('express-fileupload')

После создания приложения Express добавьте:

app.use(
		fileupload(),
    //...

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

Теперь загруженные файлы предоставляются в req.files . Если вы забудете добавить это промежуточное программное обеспечение, req.файлы будут неопределенными .

app.post('/saveImage', (req, res) => {
  const fileName = req.files.myFile.name
  const path = __dirname + '/images/' + fileName

  image.mv(path, (error) => {
    if (error) {
      console.error(error)
      res.writeHead(500, {
        'Content-Type': 'application/json'
      })
      res.end(JSON.stringify({ status: 'error', message: error }))
      return
    }

    res.writeHead(200, {
      'Content-Type': 'application/json'
    })
    res.end(JSON.stringify({ status: 'success', path: '/img/houses/' + fileName }))
  })
})

Это наименьший объем кода, необходимый для обработки файлов.

Мы вызываем свойство mv загруженного изображения. Это предоставляется нам модулем экспресс-загрузка файлов . Мы перемещаем его в путь а затем мы сообщаем об успехе (или ошибке!) вернемся к клиенту.

Проверьте свойства файлов, загруженных на стороне клиента

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

const handleImageUpload = event => {
  const files = event.target.files
  const myImage = files[0]
  const imageType = /image.*/

  if (!myImage.type.match(imageType)) {
    alert('Sorry, only images are allowed')
    return
  }

  if (myImage.size > (100*1024)) {
    alert('Sorry, the max allowed size for images is 100KB')
    return
  }

  //...
}

Оригинал: “https://flaviocopes.com/file-upload-using-ajax/”

Обработка загрузки файлов на стороне сервера с помощью Node.js

Проверьте свойства файлов, загруженных на стороне клиента

Читайте ещё по теме: