Php+layui上传Base64编码图片

　　一.引入layui上传插件

　　varupload=layui.upload;

　　varuploadInst=upload.render({

　　elem：'#uploadImg'//触发事件元素

　　，url：url//这里的请求没啥作用，我只是不想让它报接口异常提示，写的临时接口（不做处理的）

　　，exts：jpg|png|jpeg

　　，accept：images

　　，size：10240

　　，before：function(obj){

　　//预读本地文件示例，不支持ie8

　　obj.preview(function(index，file，result){

　　//$(demo).attr('src'，result);//图片链接（base64）

　　demo=$('#imgBox');

　　imgBase64(demo，file，2，0，result，function(base64){

　　$('#license').val(base64)

　　vardata={

　　idcard：''，

　　eno：''，

　　base64：base64，

　　index：0

　　}

　　});

　　});

　　}

　　，done：function(res){

　　//上传成功

　　}

　　，error：function(){

　　}

　　});

　　})

　　二.将文件转换成base64并压缩图片大小

　　functionimgBase64(demo，file，wh，mark，bs，callback){

　　if((file.size+).length6){

　　varreader=newFileReader()

　　reader.readAsDataURL(file)

　　reader.onload=function(e){

　　varimage=newImage()//新建一个img标签（还没嵌入DOM节点)

　　image.src=e.target.result

　　image.onload=function(){

　　varcanvas=document.createElement('canvas');

　　varcontext=canvas.getContext('2d');

　　varimageWidth=image.width/wh;//压缩后图片的大小

　　varimageHeight=image.height/wh;

　　canvas.width=imageWidth

　　canvas.height=imageHeight

　　context.drawImage(image，0，0，imageWidth，imageHeight)

　　varbase64=canvas.toDataURL('image/jpeg'，0.5);//图片质量0.5

　　//压缩完成

　　$(demo).attr('src'，base64);

　　vardata=base6

　　4.replace(/^data：image\/\w+;base64，/，);

　　varbytes=window.atob(data);

　　varab=newArrayBuffer(bytes.length);

　　varia=newUint8Array(ab);

　　for(vari=0;ibytes.length;i++){

　　ia[i]=bytes.charCodeAt(i);

　　}

　　varblob=newBlob([ab]，{

　　type：'image/jpeg'

　　});

　　console.log('压缩后的图片大小'，blob.size);

　　if((blob.size+).length6mark！=1){//超过1MB重新按比例3压缩一遍

　　imgBase64(demo，file，3，1，function(res){

　　callback(res)

　　})

　　}else{

　　callback(data)

　　}

　　}

　　}

　　}else{

　　$(demo).attr('src'，bs);

　　callback(bs.replace(/^data：image\/\w+;base64，/，))

　　}

　　}

　　效果如图：提交后：图片将以base64编码提交到后台：

　　三、在后台我们可以将base64图片转换成图片

　　/**bs64转图片*/

　　functionbase64($base64，$username){

　　$imageName=$username.'.png';//图片名称

　　$path=/Uploads/partner/;//图片路径

　　$dir=？'../'.：'.'.;

　　if(！is_dir($dir.$path)){//判断目录是否存在不存在就创建

　　mkdir($dir.$path，0777，true);

　　}

　　$imageSrc=$path./.$imageName;

　　//dump($dir.$imageSrc);exit;

　　if(file_put_contents($dir.$imageSrc，base64_decode($base64))){

　　//dump($imageSrc);

　　$oss=newService\Upload();

　　if(file_exists($dir.$imageSrc)){

　　$content=file_get_contents($dir.$imageSrc);

　　$error=$oss-uploadImage('member/partner/'.$imageName，$content);//上传到中企动力oss

　　$url='中企动力ossurl'.$imageName;//返回存储在中企动力oss的地址

　　unlink($dir.$imageSrc);//删除本地图片

　　}

　　return$url;

　　}

　　}

　　或者不转换成图片直接数据库中保存base64编码当时复杂的图片base64的编码很长，数据库字段长度要足够大

　　四、在htmlimg中显示base64图片