前言一直想写这篇文章,但是由于考试的原因,一直在复习,一直拖到现在才写?之前用node的express框架写了一个小项目。里面有上传图片的功能。下面是如何记录实现的(我用的是ejs)?思路一,当用户点击上传头像更新头像时,将头像上传到项目的一个文件夹中(我存放在项目的public/images/img中),并把图片名称重命名(可以命名为带有时间戳)。2、同时将图片插入到项目路径下user表中当前用户的userpicturepath中。3、然后更新用户的session,将图片中的路径赋值给session中的图片属性。4、
的src获取到当前用户session中图片的值,最后动态刷新页面头像替换为用户上传的头像实现效果代码ejs部分
"alt="照片"style="height:40px;"/>OKjs部分document.querySelector('#modifyPicV').addEventListener('click',function(){letformData=newFormData();formData.append("file",$("input[name='file']")[0].files[0]);//插入文件对象进入formData对象console.log(formData.get('file'));$.ajax({url:'/modifyPic',type:'post',data:formData,processData:false,//不处理数据contentType:false,//不设置内容类型success:function(){alert('成功');location.reload();},})});路由部分,使用formidable,这是一个Node.js模块,用于解析表单数据,特别是文件上传;let{User}=require('../data/db');letformidable=require('formidable');letcacheFolder='public/images/';//放置路径router.post('/modifyPic',function(req,res,next){letuserDirPath=cacheFolder+"Img";if(!fs.existsSync(userDirPath)){fs.mkdirSync(userDirPath);//创建目录}letform=newformidable.IncomingForm();//创建上传表单form.encoding='utf-8';//设置编码form.uploadDir=userDirPath;//设置上传目录form.keepExtensions=true;//保留后缀form.maxFieldsSize=2*1024*1024;//文件大小form.type=true;form.parse(req,function(err,fields,files){if(err){returnres.json(err);}letextName='';//后缀名switch(files.file.type){case'image/pjpeg':extName='jpg';break;case'image/jpeg':extName='jpg';break;case'image/png':extName='png';中断;':extName='png';break;}if(extName.length===0){returnres.json({msg:'只支持png和jpg格式图片'});}else{letavatarName='/'+Date.now()+'.'+extName;letnewPath=form.uploadDir+avatarName;fs.renameSync(files.file.path,newPath);//重命名console.log(newPath)//更新表User.update({picture:newPath},{其中:{username:req.session.user.username}}).then(function(data){if(data[0]!==undefined){User.findAll({其中:{username:req.session.user.username}}).then(function(data){if(data[0]!==undefined){req.session.user.picture=data[0].dataValues.picture;res.send(true);}else{res.send(false);}})}}).catch(function(err){console.log(err);});}});});