遇到了好多坑
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) })
