使用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模块用于更改上传文件的名称
Var fs= require(“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属性值
5:为上传文件个数限制最大5
注意:这个时候上传的文件没有后缀名需要自己编写代码处理
处理后缀名:使用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、 //得到值
var username = $("#username").val();
var sex = $(“input📻checked”).val();
var age = $("#age").val();
var tel = $("#tel").val();
var address = $("#address").val();
//把要上传的数据append进formdata对象中
formdata.append("username",username);
formdata.append("sex",sex);
formdata.append("age",age);
formdata.append("tel",tel);
formdata.append("address",address);
formdata.append("img",$("#img")[0].files[0])
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”
//实例化FormData
var formdata = new FormData();
//得到值
var username = $("#username").val();
var sex = $("input:radio:checked").val();
var age = $("#age").val();
var tel = $("#tel").val();
var address = $("#address").val();
//把要上传的数据append进formdata对象中
formdata.append("username",username);
formdata.append("sex",sex);
formdata.append("age",age);
formdata.append("tel",tel);
formdata.append("address",address);
formdata.append("img",$("#img")[0].files[0])
$.ajax({
type: "post",
url: "/add",
data: formdata,
dataType: "json",
contentType: false,
processData: false,
success: function (response) {
closeParent("增加成功");
}
});