【 Node 】图片上传

Multer

Multer 是一个 node.js 中间件
用于处理 multipart/form-data 类型的表单数据
它主要用于上传文件

安装

npm i multer --save	

使用

// 引入需要的模块
const express = require('express')
const multer = require('multer')
const ejs = require('ejs')
const path = require('path')

// 实例化express
const app = express()

// 设置模板引擎
app.set('view engine', 'ejs')
// 配置静态文件
app.use(express.static('./public'))

// 创建存储引擎
const storage = multer.diskStorage({
    // 设置文件存储地址
    destination: function (req, file, callback) {
        callback(null, './public/uploads')
    },
    // 文件名
    filename: function (req, file, callback) {
        callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})
// 初始化upload 单个文件上传
const upload = multer({
    // 存储引擎
    storage: storage,
    // 文件过滤
    fileFilter: function (req, file, callback) {
        checkFileType(file, callback);
    },
    // 限制图片大小 默认是 1 M
    limits: { fieldSize: 1000000 }
}).single('myImage')

// 验证文件类型
function checkFileType(file, cb) {
    // 允许的文件扩展名格式
    const filetypes = /jpeg|jpg|png|gif/;
    // 验证扩展名
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // 验证MIME
    const mimetype = filetypes.test(file.mimetype);

    if (mimetype && extname) {
        return cb(null, true);
    } else {
        cb('格式错误：只支持图片格式！')
    }
}

// 捕获客户端的POST
app.post('/uploads', (req, res) => {
    upload(req, res, (err) => {
        if (err) {
            res.render('index', { msg: err })
        } else {
            console.log(req.file);
            if (req.file === undefined) {
                res.render('index', { msg: "请选择上传文件" })
            } else {
                res.render('index', { msg: "图片上传成功", file: `uploads/${req.file.filename}` })
            }
        }
    })
})

app.get('/', (req, res) => {
    // 渲染展示页面
    res.render('index')
})

// 监听端口
const PORT = 4000
app.listen(PORT, () => { console.log(`服务器已经在${PORT}下运行`) });

初始化

const upload = multer({
	// dest || storage 在哪里存储文件
	// dest:'uploads/’,
	// 或者为了进行更多的控制 可以使用磁盘存储引擎
	storage: storage,
	
	// 文件过滤器 控制文件哪些可以被接受
	fileFilter:function(req, file, callback){
		// coding
	},

	// 限制上传数据的大小
	// 可以帮助保护你的站点抵御拒绝服务 (DoS) 攻击。
	 limits: { 
	 	// 默认是 1M
	 	fieldSize: <上传文件的大小>}
})

方法

const upload = multer({
	// coding
})

// req.file
.single(fieldname)

// req.files
.array(fieldname,<限制上传的最大数量>)

// req.files  fields里面保存的是对象数组
// [{name:"xxxx",maxCount:<number>}]
.fields(fields)

// 只接受文本域  ，将发生 "LIMIT_UNEXPECTED_FILE" 错误。这和 upload.fields([]) 的效果一样。
.none()


// req.files
// 接受一切上传的文件
.any()

磁盘存储引擎

磁盘存储引擎 (diskStorage )可以控制文件的存储

const storage = multer.diskStorage({
	// 需要创建存储文件的文件夹
	destination:function(req,file,callback){
		callback(null,'<上传文件的保存路径>')
	}	
	filename:function(req,file,callback){
		callback(null,'<上传文件的文件名>')
	}
})

错误处理机制

// 接收前端传递过来的
app.post('/profile', function (req, res) {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // 捕获错误
    } else if (err) {
      // 捕获错误
    }
    // 上传成功
  })
})

项目地址

Gitee