Multer是一个node.js中间件,用于处理multipart/form-date类型的表单数据,主要用于上传文件。
安装
$ npm install --save multer
使用
Multer会添加一个 body 对象以及 file 或 files 对象到 express 的request 对象中。body 对象包含表单的文本域信息, file 或 files 对象包含对象表单上传的文件信息。
基本使用方法:
var express = require('express')
var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
var app = express()
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file 是 `avatar` 文件的信息
// req.body 将具有文本域数据,如果存在的话
})
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
// req.files 是 `photos` 文件数组的信息
// req.body 将具有文本域数据,如果存在的话
})
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
// req.files 是一个对象 (String -> Array) 键是文件名,值是文件数组
//
// 例如:
// req.files['avatar'][0] -> File
// req.files['gallery'] -> Array
//
// req.body 将具有文本域数据,如果存在的话
})
如果你需要处理一个只有文本域的表单,你可以使用任何一个multer方法(.single(), .array(), fields()),下面是一个使用 .array() 的例子:
var express = require('express')
var app = express()
var multer = require('multer')
var upload = multer()
app.post('/profile', upload.array(), function (req, res, next) {
// req.body 包含文本域
})
图片上传实例
前端使用vue:
<div class="form-group row">
<label class="col-sm-2 col-form-label">上传图片</label>
<input type="file" id="file" name="imgData" accept="image/*" @change="upLoad($event)">
</div>
<div class="form-group row" v-show="imgPath">
<span class="col-sm-2"></span>
<div v-if="imgSrc"><img width="100px" height="150px" :src="imgPath"/></div>
</div>
methods : {
upLoad(e) {
let file = e.target.files[0];
// upload image
let fd = new FormData();
fd.append('file', file);
this.$http.post('/api/post/uploadImage', fd}).then(res => {
this.imgPath = res.data.path;
});
}
}
后端:
const express = require('express');
const app = express();
const multer = require('multer');
app.use(express.static('public'));// 加载静态文件,需要手动创建
const storage = multer.diskStorage({
destination: (req, res, cb) => {
cb(null, './public/uploads')
},
// 文件重命名
filename : (req, file, cb) => {
cb(null, Date.now() + file.originalname)
}
});
const upload = multer({storage: storage});
apiRoutes.post('/post/uploadImage', upload.single('file'), (req, res) => {
let url = '/api/uploads/' + req.file.filename;
res.json({success: true, path: url});
});
可参考文档 multer。