express Multer 官方文档
Express multer middleware - Express中文文档 | Express中文网 (expressjs.com.cn)
中间件
layui 前端上传代码:
部份代码:
<button type="button" class="layui-btn" id="ID-upload-demo-btn">
<i class="layui-icon layui-icon-upload"></i> 单图片上传
</button>
<div style="width: 132px;">
<div class="layui-upload-list">
<img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
<div id="ID-upload-demo-text"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
js部份
<script>
layui.use(function(){
var upload = layui.upload;
var layer = layui.layer;
var element = layui.element;
var $ = layui.$;
// 单图片上传
var uploadInst = upload.render({
elem: '#ID-upload-demo-btn',
url: 'http://localhost:3006/upload', // 实际使用时改成您自己的上传接口即可。
// method: 'post',
before: function(obj){
// 预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#ID-upload-demo-img').attr('src', result); // 图片链接(base64)
console.log('result')
});
element.progress('filter-demo', '0%'); // 进度条复位
layer.msg('上传中', {icon: 16, time: 0});
},
done: function(res){
// 若上传失败
console.log(res)
if(res.code > 0){
return layer.msg('上传失败');
}
// 上传成功的一些操作
// …
$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
},
error: function(){
// 演示失败状态,并实现重传
var demoText = $('#ID-upload-demo-text');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
},
// 进度条
progress: function(n, elem, e){
element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});
</script>
图示:
建目录:
后端代码:
npm install --save multer
const express = require('express')
const multer = require('multer')
const fs = require('fs')
const { json } = require('express');
const app = express()
app.use((req,resp,next) => {
// 跨域设置
resp.header("Access-Control-Allow-Credentials", true);
resp.header("Access-Control-Allow-Origin", "*");
resp.header("Access-Control-Allow-Headers", "X-Requested-With");
resp.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
resp.header("X-Powered-By", ' 3.2.1');
resp.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/',function(req, res, next){
res.send({
success:true
})
});
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './upload')
},
filename: function (req, file, cb) {
// const uniqueSuffix = Date.now()
// cb(null, uniqueSuffix + '-' +file.originalname)
// 解决中文名乱码的问题
file.originalname = Buffer.from(file.originalname, "latin1").toString(
"utf8"
);
cb(null, file.originalname)
}
})
app.post('/upload', multer({
storage: storage
}).single('file'),(req, res) =>{
console.log(req.file);
// res.send(req.file)
// res.json()
const url = './upload/' + req.file.filename;
res.json({
code: 0,
msg: '上传成功!',
data: {
src: url,
}
})
});
app.listen(3006, () => { //创建监听
console.log(`server is running at http://localhost:3006`);
console.log('服务器启动成功...')
})
注:
1. 文件名中文乱码 解决
2.跨域设置 要做,免得测式不行!!