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圖片