代码实例：如何在Node.js中实现文件上传？

2021年3月12日12:58:07 发表评论 751 次浏览

介绍：文件上传意味着用户从客户端计算机请求将文件上传到服务器。例如, 用户可以在Facebook, Instagram等上上传图像, 视频等。

Multer模块的功能：可以使用Multer模块将文件上传到服务器。市场上还有其他模块, 但是在文件上传方面, multer非常受欢迎。 Multer是用于处理multipart / form-data的node.js中间件, 通常用于上传文件。

注意：Multer将仅处理多部分(multipart / form-data)的那些形式。因此, 每当使用multer时, 请确保将多部分形式放置。

介绍：

它很容易上手, 易于使用。
它是文件上传的广泛使用和流行的模块。
用户可以一次上传单个或多个文件。

Multer模块的安装：

你可以访问链接安装multer模块。你可以使用此命令安装此软件包。 npm安装multer

安装multer之后, 你可以使用命令在命令提示符下检查multer版本。 npm版本multer

之后, 你可以仅创建一个文件夹并添加一个文件, 例如index.js, 要运行此文件, 你需要运行以下命令。节点index.js

要求模块：你需要使用这些行在文件中包括multer模块。 var multer = require('multer');

因此, Multer基本上将一个或多个文件对象以及一个主体对象添加到请求对象。 file / files对象包含通过表单上传的所有文件, 并且表单文本字段的所有值都包含在body对象中。这是无论何时提交表格, multer都会绑定数据的方式。

文件名：Signup.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 i.e. 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" )
})

运行程序的步骤：

项目结构将如下所示：