multer是一个Node.js中间件，用于处理 multipart/form-data 类型的表单数据，主要用于文件上传，注意：Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。
Multer会自动添加一个body对象及file或files对象到 express框架的request 对象，fifile或fifiles对象包含表单上传的文件信息。
通过表单上传文件时需要注意的是：
（1）表单的提交方式只能是POST
（2）须设置表单的 enctype="multipart/form" 属性
1. 安装 multer插件
npm i multer -S
2.封装multer
- 存放图片的文件夹，如果没有，需要手动创建，对应destination下的文件目录
image.png
//封装上传图片
//引进multer模块 记得在终端安装multer模块
const multer = require("multer");
const path = require('path');
//3、对上传的文件进行配置
var storage = multer.diskStorage({
//指定文件上传到服务器的路径
destination: function (req, file, cb) {
cb(null, './public/images') //上传目录
},
//指定上传到服务器文件的名称
filename: function (req, file, cb) {
// 1.获取文件后缀名
let extname = path.extname(file.originalname);
// 2.自定义文件名格式
const filedname = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, filedname + extname);//文件名
// console.log(filedname+ extname);
}
})
const upload = multer({ storage })
//导出模块
module.exports = upload
2. 使用
- 前端需要把文件流传过来
const express = require('express');
const router = express.Router();
const multer = require('../utils/multer')
router.post('/',multer.single('file') ,async (req,res) => {
let file = req.file;
console.log(file);
if(file) {
res.json({
status: 200,
msg: '上传成功',
fileName: '/images/' + file.filename
})
} else {
res.json({
status: -1,
msg: '上传失败'
})
}
})
module.exports = router
3. 小程序vant-weapp 用法
<van-uploader file-list="{{ fileList }}" max-count="3" bind:after-read="afterRead" />
// 上传图片
afterRead(event) {
const {
file
} = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({
url: this.data.serveraddr + '/uploadImg', //
filePath: file.url,//这个必传
name: 'file',//对应multer.single('file') 的file
formData: {
user: 'test'
},
success: res => {
// 上传完成需要更新 fileList
console.log(res);
const {
fileList = []
} = this.data;
fileList.push({
...file,
url: JSON.parse(res.data).fileName
});
this.setData({
fileList
});
},
});
},
4. vue element ui 用法
跳转到其他文章： https://www.jianshu.com/writer#/notebooks/51742359/notes/97174318
