multer 图片上传
引用静态文件:
//静态文件夹//前一个是路由,后一个相对本文件的路径用来存放图片
//app.use('',express.static(path.join(__dirname,'./static')))
app.use(express.static(path.join(__dirname,'./static')))
安装multer
npm install --save multer
html:
js:
const routerUrl='http://localhost:3000' // 3000端口
$('.photobtn').click(function(){
var formData = new FormData();
formData.append('test',$('.photo')[0].files[0]); //将图片内容放入formData中
//console.log($('.photo')[0].files[0])
var Url=routerUrl+"/user/photo";
$.ajax({
type:"post",
url:Url,
data:formData,
cache:false,//格式解析 可以解析图片格式
contentType:false,
processData:false,
success:function(res){
console.log(res)
if(res.err==0)
{
alert(res.msg);
}else{
alert(res.msg);
}
},
error:function(err){
console.log(err)
}
});
})
后台处理:
router.post('/photo', upload.single('test'), function (req, res) {
//test和前端form一致:formData.append('test',$('.photo')[0].files[0]);
var filename1=newDate().getTime()+
parseInt(Math.random()*9999)+'.'+req.file.originalname;//图片名(避免重复)
var des_file='./static/imgs/'+filename1;//写入路径
//console.log(des_file);
var dir='img/'+filename1;//读取文件路径
//console.log(dir);
fs.readFile(req.file.path,(err,data)=>{//读取上传文件
//console.log(data);
fs.writeFile(des_file,data,(err,datas)=>{
if(err){
//console.log(err)
return res.send({err:-2,msg:"上传错误"})}
spimg.insertMany({src:dir,type:1},(err,res1)=>{ //将图片路径插入数据库
if(err){return res.send({err:-3,msg:"上传失败"})}
if(res1.length==1){
res.send({err:0,msg:"上传成功",data1:res1[0].src});
fs.unlinkSync(req.file.path,(err)=>{//删除临时文件中照片
if (err) {return res.send({err:-4,msg:"删除缓存失败"})}
});
}
})
})
})
})
文件目录: