Express通过multer中间件实现多图片上传功能

Multer是一个Node.js中间件，用于处理 multipart/form-data 类型的表单数据，主要用于文件上传，注意：Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。
Multer会自动添加一个body对象及file或files对象到 express框架的request 对象，fifile或fifiles对象包含表单上传的文件信息。通过表单上传文件时需要注意的是表单的提交方式只能是POST。

1、安装multer中间件

npm install multer --save

2、在需要用到的js文件中引入需要用到的中间件

const multer = require("multer"); //是node的中间件, 处理表单数据 主要用于上传文件 
let fs = require('fs');//fs模块：fs模块用于对系统文件及目录进行读写操作。
let path = require('path');//用于处理文件路径的小工具

3、配置Multer并使用

// 指定图片存储位置
let uploadImg = multer({
	storage: multer.diskStorage({
		//设置文件存储位置
		destination: function(req, file, cb) {
			let date = new Date();
			let year = date.getFullYear();
			let month = (date.getMonth() + 1).toString().padStart(2, '0');
			let day = date.getDate();
			let dir = "./upload/Img/" + year + month + day;

			//判断目录是否存在，没有则创建
			if (!fs.existsSync(dir)) {
				fs.mkdirSync(dir, {
					recursive: true
				});
			}
			//dir就是上传文件存放的目录
			cb(null, dir);
		},
		//设置文件名称
		filename: function(req, file, cb) {
			let fileName =Date.now() + path.extname(file.originalname);
			//fileName就是上传文件的文件名
			cb(null, fileName);
		}
	})
});

/** 
 * @url /api/upload/upImg
 * @desc 挂载图片上产中间件 仅上传图片
 * uploadImg.array('file',3),接收以'file'命名的上传文件数组,限制最多上传3个文件

*/
router.post("/upImg",  uploadImg.array('file',3), (req,res) => {
	console.log(req.files)
	//req.files[0].path为上传文件数组中第一个文件的地址
	url = "http://localhost:3001" + req.files[0].path
	
	//将图片地址返回前端
	res.json({ok: true,url: url})
})

前台上传部分源码片段

这里用到elementUI中的up-load组件，具体根据自己需要修改

	<el-upload
      class="avatarUploader"
      action="/api/upload/upImg"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon editor-img-plus"></i>
    </el-upload>