简单的头像上传

最近做了一个简单的上传头像的功能,在前台页面需要用一个form表单,在里面对上传的头像做一些相关设置,然后就是提交之后一些相应的处理,我这儿是将上传的头像保存在当前项目的images文件夹下的specialLearnImages文件夹下的。并结合session将用户名显示在导航栏上。当然也可以获得上传的图片名称,并将图片路径存入数据库,便于在其他页面进行操作。这儿还用到一个小技巧,就是改变上传文件标签的默认样式,在上面用一个div,改成自己想要的样式,而不要默认的“选择文件....”具体在我的上一篇文章有说明,下面附上源代码:

“<div id="uploadDiv">
<form action="uploadImage.do" method="post" enctype="multipart/form-data" name="fileInfo" id="form1">
<div id="divImage">
<img src="../images/specialLearnImages/<%=userUrl%>" alt="">
<div class="form-signin-heading" id="btnUpload"></div>
</div>
<span id="noteUpLoad"><%=user%></span>
<br/>
<br/>
<input name="txtFile" id="txtFile" type="file" accept=".jpg,.png,.jpeg,.gif,.bmp"/>
<input type="button"value="上传头像"id="fileBtn"/>
</form>
</div>”
在app.js 中:”
引入模块
var express=require("express");
var app=express();//执行express里的全局函数,返回一个express对象
var mysql=require("mysql");
var fs=require("fs");
var path=require("path");
var AV=require("leanengine");
var formidable=require("formidable");
var nodemailer=require("nodemailer");
var multipart=require('connect-multiparty');
var session=require('express-session');//session
var cookieparse=require('cookie-parser');//cookie


//上传头像 app.post("/uploadImage.do",multipart(),function (req,res){ //console.log("in"); //console.log(req.files); //获取文件名 var filename=req.files.txtFile.originalFilename||path.basename(req.file.txtFile.ws.path); req.session.userUrl=filename;//记录当前的头像路径 //console.log(req.files); //copy file to public directory //指定一个保存文件的地址 var targetpath=path.dirname(__filename)+'/public/images/specialLearnImages/'+filename; //复制文件 fs.createReadStream(req.files.txtFile.ws.path).pipe(fs.createWriteStream(targetpath)); //返回信息到客户端 res.json({code:200,msg:{url:'images/specialLearnImages/'+filename}}); //返回json格式的数据 var userName=req.session.user;//session记录用户名 var myConnect=mysql.createConnection({ host:"host", user:"user", password:"password", database:"database" }); //打开连接 myConnect.connect(); //执行sql语句等的操作 var sql; sql='UPDATE loginregist SET userUrl=? WHERE userName=? '; myConnect.query(sql,[filename,userName],function(err,data){ //res.send(data); }); //关闭数据库的接口 myConnect.end(); }); app.post("/getImgPath.do",stuCenterDao.getImgPath);//得到头像路径“
原文地址:https://www.cnblogs.com/moqq/p/6078048.html