multer(node中间件)
下载:链接(https://www.npmjs.com/package/multer)
npm i multer
创建一个upload.js文件,内容为下:
const multer = require('multer')
// 自定义上传目录 文件名
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/uploads') // 上传的文件目录(文件上传以后放在哪里)
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now()+path.extname(file.originalname)) // 上传的文件名字 (文件名+‘-’+时间戳+源文件的后缀名【例如:jpg/png......】)
}
})
const upload = multer({ storage: storage })
// 导出:
module.exports = upload 导出使用
文件上传路由:
定义一个上传路由/upload
:
router.post('/upload',upload.single('file'), (req, res) => { // 'file'和标签的name属性值一样!
res.send({
code: 0,
msg:'上传成功',
data: '/static/uploads/'+req.file.filename // 上传成功的服务器的地址 (上文中文件所在地址)
})
})
前端ajax请求上传文件:
// 将上传的文件存入formData中
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'post',
processData: false, //必须 缓存关了
contentType: false, //必须 关闭 设置 数据格式(以 数据本身格式为准 xxxxx urlencoded)
data: formData,
success: function(res){
console.log(res);
if(res.code === 0) {
alert(res.msg);
$('#img').attr('src', res.data) // 将后端返回的【上传成功的服务器的地址 (上文中文件所在地址)】设置给img的src属性,这样上传的时候有一个预览的效果
}
}
})