Загрузка файлов в Node.js

Опубликовано: 5 Августа, 2021

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

Особенности модуля Multer: Файл может быть загружен на сервер с помощью модуля Multer. На рынке есть и другие модули, но multer очень популярен, когда дело доходит до загрузки файлов. Multer - это промежуточное программное обеспечение node.js, которое используется для обработки данных multipart / form, которые в основном используются для загрузки файлов.

Примечание: Multer будет обрабатывать только те формы, которые являются составными (multipart / form-data). Поэтому всякий раз, когда вы используете multer, убедитесь, что вы поместили multipart в форму.

Вступление:

  1. Легко начать и легко использовать.
  2. Это широко используемый и популярный модуль для загрузки файлов.
  3. Пользователи могут загружать один или несколько файлов одновременно.

Установка модуля Multer:

  1. Вы можете посетить ссылку Установить модуль Multer. Вы можете установить этот пакет с помощью этой команды.
     npm установить Multer
  2. После установки multer вы можете проверить свою версию multer в командной строке с помощью команды.
     npm версия Multer
  3. После этого вы можете просто создать папку и добавить файл, например index.js. Чтобы запустить этот файл, вам необходимо выполнить следующую команду.
     узел index.js
  4. Требуемый модуль: вам нужно включить модуль multer в свой файл, используя эти строки.
     var multer = require ('multer');
  5. Таким образом, Multer в основном добавляет объект файла или объект файлов и объект тела к объекту запроса. Объект file / files содержит все файлы, которые загружаются через форму, и все значения текстовых полей формы содержатся в объекте body. Вот как multer связывает данные при отправке формы.

    Имя файла: Registration.ejs




    <!DOCTYPE html>
    < html >
    < head >
    < title >FILE UPLOAD DEMO</ title >
    </ head >
    < body >
    < h1 >Single File Upload Demo</ h1 >
    < form action = "/uploadProfilePicture"
    enctype = "multipart/form-data" method = "POST" >
    < span >Upload Profile Picture:</ span >
    < input type = "file" name = "mypic" required/> < br >
    < input type = "submit" value = "submit" >
    </ form >
    </ body >
    </ html >

    Имя файла: index.js




    const express = require( "express" )
    const path = require( "path" )
    const multer = require( "multer" )
    const app = express()
    // View Engine Setup
    app.set( "views" ,path.join(__dirname, "views" ))
    app.set( "view engine" , "ejs" )
    // var upload = multer({ dest: "Upload_folder_name" })
    // If you do not want to use diskStorage then uncomment it
    var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    // Uploads is the Upload_folder_name
    cb( null , "uploads" )
    },
    filename: function (req, file, cb) {
    cb( null , file.fieldname + "-" + Date.now()+ ".jpg" )
    }
    })
    // Define the maximum size for uploading
    // picture ie 1 MB. it is optional
    const maxSize = 1 * 1000 * 1000;
    var upload = multer({
    storage: storage,
    limits: { fileSize: maxSize },
    fileFilter: function (req, file, cb){
    // Set the filetypes, it is optional
    var filetypes = /jpeg|jpg|png/;
    var mimetype = filetypes.test(file.mimetype);
    var extname = filetypes.test(path.extname(
    file.originalname).toLowerCase());
    if (mimetype && extname) {
    return cb( null , true );
    }
    cb( "Error: File upload only supports the "
    + "following filetypes - " + filetypes);
    }
    // mypic is the name of file attribute
    }).single( "mypic" );
    app.get( "/" , function (req,res){
    res.render( "Signup" );
    })
    app.post( "/uploadProfilePicture" , function (req, res, next) {
    // Error MiddleWare for multer file upload, so if any
    // error occurs, the image would not be uploaded!
    upload(req,res, function (err) {
    if (err) {
    // ERROR occured (here it can be occured due
    // to uploading image of size greater than
    // 1MB or uploading different file type)
    res.send(err)
    }
    else {
    // SUCCESS, image successfully uploaded
    res.send( "Success, Image uploaded!" )
    }
    })
    })
    // Take any port number of your choice which
    // is not taken by any other process
    app.listen(8080, function (error) {
    if (error) throw error
    console.log( "Server created Successfully on PORT 8080" )
    })

    Шаги по запуску программы:

    1. Структура проекта будет выглядеть так:

      Здесь «uploads» - это папка, в которую будут загружены наши файлы, на данный момент она пуста. «Singup.ejs» хранится в папке просмотров.
    2. Убедитесь, что у вас есть «движок просмотра», как я использовал «ejs», а также установите экспресс и multer, используя следующие команды:
       npm установить ejs
       npm установить экспресс
       npm установить Multer
    3. Запустите файл index.js, используя команду ниже:
       узел index.js 

    4. Откройте браузер и введите этот URL:
       http: // локальный: 8080 /
    5. Затем вы увидите форму регистрации, как показано ниже:
    6. Затем выберите файл для загрузки и нажмите кнопку «Отправить».
      В случае возникновения ошибки отобразится следующее сообщение:

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

    Вот как вы можете загрузить файл в Node.js с помощью модуля multer. На рынке есть и другие модули для загрузки файлов, такие как fileupload, express-fileupload и т. Д.