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

“<div >
<form action="uploadImage.do" method="post" enctype="multipart/form-data" name="fileInfo" >
<div >
<img src="../images/specialLearnImages/<%=userUrl%>" alt="">
<div class="form-signin-heading" ></div>
</div>
<span ><%=user%></span>
<br/>
<br/>
<input name="txtFile" />
<input type="button"value="上传头像"/>
</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);//得到头像路径“

 

相关文章:

  • 2022-01-19
  • 2021-09-10
  • 2021-10-20
  • 2022-12-23
  • 2022-12-23
  • 2021-10-16
  • 2021-12-23
猜你喜欢
  • 2021-12-23
  • 2021-06-28
  • 2022-12-23
  • 2021-12-23
  • 2021-10-25
  • 2021-11-28
  • 2022-02-09
相关资源
相似解决方案