MUI + Nodejs + Mongodb 图片上传的使用总结 （我写的是头像上传 一样的都是）

为了写这个功能真的写了好久 

遇到了好多坑

1   ajax传输图片要把图片转成base64的    我也不知道为什么   别的方式后台接不到  

前端代码

function galleryImg() {  //按键调用这个函数来执行从相册选取操作
    // 从相册中选择图片
    console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){ //图片的路径
        console.log(path);
        compressImage(path)//压缩图片 执行上传  传递给下面的压缩上传函数   从相册的选择是一眼的
    }, function ( e ) {
        console.log( "取消选择图片" );
    }, {filter:"image"} );
}        


function carmerImg(){
    
//                    var res = cmr.supportedImageResolutions[0];
//                    var fmt = cmr.supportedImageFormats[0];
                    var cmr = plus.camera.getCamera();
                    
                    cmr.captureImage( function( path ){
                        console.log( "Capture image success: " + path );
                        compressImage(path)//压缩图片 执行上传
                    },
                        function( error ) {
                            console.log( "Capture image failed: " + error.message );
                        },
                        {}
                    )
}


//压缩图片 上传
function compressImage(path){
    plus.zip.compressImage({ //压缩图片的一些操作  可以不压缩  下面的canvans一样压缩
            src:path,//原路径
            dst:path,//目标路径
            quality:100,// 压缩的质量  100原图
            overwrite:true,//覆盖源文件    
            clip:{  //裁切
                width:"100%",
                height:"100%"
            }
            
        },
        function(event) {  //成功压缩的回掉函数
            var imgSrc = event.target;
            if(!imgSrc){
                mui.toast("照片不见了！请重试...")
                return false;
            }
            var imgLoad = {  //这些东西要不要无所谓
                src : event.target,
                size : event.size,
                width : event.width,
                height : event.height
            }
            
            var img = new Image();
            img.src = imgLoad.src; // 传过来的图片路径在这里用。
            img.onload = function() {
                 that = this;
                //生成比例
                var w = that.width,h = that.height,scale = w / h;
                w =640 || w; //480  你想压缩到多大，改这里
                h = w / scale;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = w;
                canvas.height = h;        
                ctx.drawImage(that, 0, 0, w, h);
                var base64 = canvas.toDataURL('image/jpg',  1 );
                //console.log(base64)
                var data = {};
                data.base64 = base64;
                data.name = userInfo.userId;  //这些可以写你想传给后台的信息
                
            
            console.log("上传对象" + JSON.stringify(data.name))
            plus.nativeUI.showWaiting("图片拼命上传中...");
            mui.ajax('http://'+Url+':8888/userImg',{ //你的服务端地址
                data:data,
                timeout:5000,
                headers:{"enctype" : "multipart/form-data"}, //这个头部的应该可以不要
                crossDomain:true,
                type:"POST"    ,            
                error:function(xhr, type, errorThrown){
                    plus.nativeUI.closeWaiting()
                    mui.toast(xhr.responseText)
                    
                    mui('#sheet1').popover('toggle');
                    
                },
                
                success:function(data, status, xhr){
                    $('.userimg').attr("src", imgSrc)
                    plus.nativeUI.closeWaiting()
                    mui.toast(xhr.responseText)
                    mui('#sheet1').popover('toggle');
                    
                }
            } )}
            
        },function(error) {
            alert("压缩上传失败了奥，请重试...");
    });
}

mongodb $set:{key, value}   设置数据的时候  如果被设置数据没有对应的key  它会创建这个key value  有这个key  会直接覆盖

mongodb upadte ({key: value})  查询  key value 的数据类型也要对应  不然 查不到

nodejs的base64通过Buffer对象去解析存储

如果出现  request entity too larger     记得修改bodyparser的limit 

后端代码

var express = require('express');
var app = express();
var fs =require('fs');
var bodyParser = require('body-parser');
var multipart = require('connect-multiparty'); //在处理模块中引入第三方解析模块
var multipartMiddleware = multipart();
var MongoClient = require('mongodb').MongoClient;


app.use(bodyParser.urlencoded({ extended: true, limit:"50mb" })); //修改上传的显示 
app.use(bodyParser.json({limit:"50mb"}));
app.use(express.static('public'))
app.use(multipart({uploadDir:'./public' }));//设置上传文件存放的地址。
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//头像上传
app.post('/userImg', multipartMiddleware, function(req, res){  //引用connect - muitipart 模块
        console.log(req.body.name)
       // var parseInt()

//不要把base64直接通过query.body传过来  不然很麻烦  转格式什么的 

     var base64 = req.body.base64.replace(/^data:image\/\w+;base64,/, "");//去掉图片base64码前面部分data:image/png;base64//
     var dataBuffer = new Buffer(base64, 'base64'); //把base64码转成buffer对象，
     console.log('dataBuffer是否是Buffer对象：'+Buffer.isBuffer(dataBuffer));
     //验证路径是否存在

        fs.exists("public/img/userImg/"+ req.body.name + "/", function(exits){  //验证路径  这些都是你放图片的路径   存在的话就直接覆盖 不存在的话创建路径再覆盖
            if(exits == true) {
                console.log("路径存在")
                fs.writeFile("public/img/userImg/"+ req.body.name + "/" + "userHeaderImg.jpg", dataBuffer, function(err){ //写入文件
                    if(err){
                        res.status(500)
                        res.send({success:"上传图片失败，路径覆盖出错"})
                    } else {
                        MongoClient.connect('mongodb://dbadmin:li19941217@localhost:27017/', function(err, db){  //这里的逻辑我写的是如果上传了头像 更新用户的头像数据 然后本地的客户端就会获取这个值来更新头像   根据自己的逻辑写
                            var userDB = db.db("ergou");
                           

                             userDB.collection("users", function(err, users){ 

                            //     console.log("查找" +{userId:req.body.name} )
                            //     console.log(typeof 0)
                            //     console.log(typeof parseInt(req.body.name))
                            //      users.find({userId: parseInt(req.body.name) }, function(err, items){
                            //     items.toArray(function(err, item){
                            //         console.log(item)
                            //     })
                            // })
                             /*记住数字的查询要变成数字  不能是字符串  因为在mongo里会当成 ‘0’*/
                                users.update({userId: parseInt(req.body.name)}, {$set:{headerImg:true}}, function(err, results){     //这里注意了     这里的查询的数据类型要和你的后台存储的类型一致

                                  //  console.log(results)
                                    if(err){
                                        res.status(500)
                                        res.send({success:"保存到数据库的过程中出错了，请重试"})
                                    } else {
                                        res.status(200)
                                        res.send({success:"图片上传成功"})
                                    }
                                })
                            })
                        })
                        
                    }
                    
                })
            } else { //如果路径不存在  建立路径 并且写入图
                fs.mkdir("public/img/userImg/"+   req.body.name , function(err){
                    if(err) {
                        console.log("创建目录失败")
                        res.status(500);
                        res.send({success:"保存图片到服务器的过程失败了"})
                    } else {
                        fs.writeFile("public/img/userImg/"+   req.body.name +"/"+  "userHeaderImg.jpg", dataBuffer, function(err){
                             MongoClient.connect('mongodb://dbadmin:li19941217@localhost:27017/', function(err, db){
                                var userDB = db.db("ergou");
                                userDB.collection("users", function(err, users){

                            //     users.find({userId:req.body.name}, function(err, items){
                            //     items.toArray(function(err, item){
                            //         console.log(item)
                            //     })
                            // })

                                users.update({userId: parseInt(req.body.name)}, {$set:{headerImg:true}}, function(err, results){//$set 有酒更新 没有就创建
                                   // console.log(results)
                                    if(err){
                                        res.status(500)
                                        res.send({success:"保存到数据库的过程中出错了，请重试"})
                                    } else {
                                        res.status(200)
                                        res.send({success:"图片上传成功"})
                                    }
                                })
                            })
                        })
                         })
                    }
                })
            } //else 结束
        })//路径的验证结束
     
 
     //console.log(req.body.base64)
     
})