H5

H5

H5-mui+nodejs+mysql上传存储头像实现

关于h5移动应用开发，但凡有账户的项目都需要实现上传头像的功能
之前写课业小项目（音乐播放器）的时候在网上找了很久都没找到合适的，所以解决了这个问题后整理了一下课业小项目的部分代码分享一下

前端使用H5-mui

mui.plusReady(function(){//mui调用系统底层必须用ElementById("icon").addEventListener("tap",function(){plus.gallery.pick(function(path){//serverPath+"/upimg"是上传地址var task=ateUpload(serverPath+"/upimg",{},function(t,s){//新建上传任务if(s==200){mui.alert("上传成功");}else{mui.alert("上传成功");}});task.addFile(path,{"key":"icon","name":localStorage.user,"mime":"image/png"});//localStorage.user是用户ID，标识图片；mime是文件类型task.start();   //上传          },function(){mui.alert("选择失败！");});});});

后台采用nodejs，使用formidable模块接收图片

var http=require("http");
var url=require("url");
var server&#ateServer(function(req,res){
var param=url.parse(req.url,true);var strQuery=param.pathname;
if(strQuery==="/upimg"){//上传修改头像console.log("upimg");var form= new formidable.IncomingForm();form.uploadDir="./imgs";//图片存储地址form.keepExtensions=true;//保留文件后缀名/*这里我不管怎么设置，后缀名都会消失，但是在我同学电脑上就没事，应该是我的电脑问题，所以我在下面存储的时候加了“.png”的后缀名，引用的时候记得适当修改*/form.parse(req,function(err,fields,files){var str={//需要存进数据库的内容path:"/"+files.icon.path+".png",//图片存储路径id:files.icon.name//前台传来的用户ID};var oldpath=files.icon.path;//以下五行是因为后缀名问题做出的文件名更改var newpath=files.icon.path+".png";//无该问题的可以删除，但需要将str里path后面的“.png”删除fs.rename(oldpath,newpath,(err)=>{if(err) throw err;});Params.postData(req,function(param){//这里是更改数据库内容了，我的数据库连接方式和Post解析方法会在下面给出Account.upimg(str,function(err,rows){var rtn={};if(err || rows.length===0){rtn={state:"err"};}else{rtn={state:"success"};}var sJson=JSON.stringify(rtn);d(sJson);});});});}});
server.listen(3000);

数据库修改方面：数据库里img属性存储的是图片地址

unction upimg(params,cb){var sql="update user set img=? where id=?";//数据库里img存储的是图片地址var p=[params.path,params.id];Connection(function(err,conn){conn.query(sql,p,function(err,rows){cb(err,rows);lease();});});
}

下面是工具包Params内容，希望不是多此一举

var url=require("url");
var querystring =require("querystring");
function postData(req,cb){var postdata="";("data",function(buffer){postdata+=buffer;});("end",function(){var query=querystring.parse(postdata);cb(query);});
}
function getData(req,cb){var param=url.parse(req.url,true).query;cb(param);
}exports.postData=postData;
Data=getData;

有疑问的可以在评论区提出
但笔者不经常在线，请恕我不能及时回复

接下来有时间的话，笔者会整理一下音乐播放器小项目的代码，将各个功能的实现详细发表