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

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

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

前端使用H5-mui

mui.plusReady(function(){//mui调用系统底层必须用plusReady
			document.getElementById("icon").addEventListener("tap",function(){
					plus.gallery.pick(function(path){//serverPath+"/upimg"是上传地址
						var task=plus.uploader.createUpload(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=http.createServer(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);
                    res.end(sJson);
                });
            });
        });
    }
    });
server.listen(3000);

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

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

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

var url=require("url");
var querystring =require("querystring");
function postData(req,cb){
    var postdata="";
    req.on("data",function(buffer){
        postdata+=buffer;
    });
    req.on("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;
exports.getData=getData;

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

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