使用multer
1、 在项目中下载multer操作模块
Npm install multer --save
前端代码：
<form class="layui-form" action="/add" method="POST" enctype="multipart/form-data">
注意只要是上传文件请设置form enctype属性为：multipart/form-data
设置完即可
服务器代码
1、 引入multer模块
Var multer = require(“multer”);
2、 引入fs模块用于更改上传文件的名称
3、 设置上传文件保存路径
//配置上传文件的保存路径 放到public下upload目录中方便前端代码访问 upload文件如果不存在会自动创建
var upload = multer({ dest: 'public/upload/' });
单文件上传：
使用single(filename)
Router.post(“/router”,upload.single(filename),function(req,res,next){
Res.send(“上传成功”)
})
多文件上传：
前端修改：
<input type="file" id="L_repass" multiple name="img" autocomplete="off" class="layui-input">
添加属性 multiple为选择多个文件
后端代码使用循环上传文件
把upload.single改为upload.array(“imgs”,5)
Imgs：file name属性值
设置只选择图片accept="image/png,image/gif,image/jpg,image/jpeg"
5：为上传文件个数限制最大5
把req.file 改为files
注意：这个时候上传的文件没有后缀名需要自己编写代码处理
处理后缀名：使用fs模块中的
//得到文件信息
var file = req.file;
console.log(file);
//修改文件名称
fs.renameSync(file.path,"public/upload/"+file.originalname);
res.send("上传成功");
处理文件随机名称可以使用时间戳与随机数进行处理
router.post('/add',upload.single('img'), (req, res) => {
//得到文件信息
var file = req.file;
console.log(file);
var filename = "public/upload/";
if(file.mimetype == "image/jpeg"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
}else if(file.mimetype == "image/png"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
}else{
res.send("上传文件格式不支持请上传png与jpg图片");
}
fs.renameSync(file.path,filename);
res.send("上传成功");
});
最后把图片路径信息与其他信息保存到数据库中
//files为提交过来的表单中file组件的name属性值
router.post('/add',upload.single('img'), (req, res) => {
//得到文件信息
var file = req.file;
var filename = "upload/";
if(file.mimetype == "image/jpeg"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
}else if(file.mimetype == "image/png"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
}else{
res.send("上传文件格式不支持请上传png与jpg图片");
}
fs.renameSync(file.path,"public/"+filename);
var sql = `INSERT INTO stuinfo (stuname, stuicon, stusex, stuage, stutel,stuaddress) VALUES ('${req.body.username}', '${filename}', '${req.body.sex}', '${req.body.age}', '${req.body.tel}', '${req.body.address}')`;
mdb(sql,function(err,result){
res.send("添加信息成功")
})
});
Ajax 上传图片
1、 手动初始化formData对象
2、 把你要上传的数据append进fromData对象中
3、 // 得到选中上传的文件对象
4、 let file=$("#imgajax")[0].files[0];
5、 //实例化formdata对象
6、 let formdata=new FormData();
7、 // 把要上传的图片对象添加到formdata里面去
formdata.append("img",file)
append(“key”,value)
key:类似于 表单中文本域中name的属性值
value:数据
$("#img")[0].files[0]类似于document.getElementById(“img”).files[0]
在ajax中添加两个属性
contentType: false,内容类型设置为false
processData: false,数据编码设置为false类似于enctype="multipart/form-data"
// 得到选中上传的文件对象
let file=$("#imgajax")[0].files[0];
//实例化formdata对象
let formdata=new FormData();
// 把要上传的图片对象添加到formdata里面去
formdata.append("img",file)
// ajax上传
$.ajax({
type: "POST", //默认get
url: "/uploadImg/addimg", //默认当前页
data: formdata, //格式{key:value}
contentType:false,
processData:false,
dataType: "json",
beforeSend: function () {}, //请求发送前回调,常用验证
success: function (response) { //请求成功回调
alert("上传成功")
},
error: function (e) { //请求超时回调
if(e.statusText == "timeout"){
alert("请求超时");
}
},
complete: function () {}, //无论请求是成功还是失败都会执行的回调，常用全局成员的释放，或者页面状态的重置
});
Ajax多张上传
把选择的多个文件对象循环添加到formdata对象中去
let files=$("#imgajaxs")[0].files;
let formdata=new FormData();
for (const file of files) {
formdata.append("imgs",file)
}