博主最近碰到几个朋友遇到图片上传的问题 周末在家没事干 就写了一个demo
其实原理很简单 用插件裁完图的数据是base64数据 post 到后台 保存为文件
router.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data:URL var base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""); var dataBuffer = new Buffer(base64Data, 'base64'); var url=path.join('./', 'public')+"/out.png"; fs.writeFile(url, dataBuffer, function(err) { if(err){ res.send({meta: {code: 1, message: '请求失败'}, data:''}); }else { res.send({meta: {code: 0, message: '通讯成功'}, data: {image: "out.png"}}) ; } }); });
前端请求代码
$('#btnCrop').on('click', function(){ var img = cropper.getDataURL(); $.ajax({ type: "post", url: "/upload/", data: {imgData:img}, success: function (result) { var code=result.meta.code if(code==1) { alert('保存失败') } else { $('.cropped').append('<img src="'+result.data.image+'">'); alert('保存成功') } } }); })
本实例代码 http://git.oschina.net/niefengjun/niefengjundemo
以后小聂的demo 都会放到这个项目里 大家有问题 可以给我提问哈
你打算打赏多少钱呢?
(微信扫一扫)