blob流转base64图片预览上传到thinkphp5

再整理图片上传发现blob流转base64图片预览上传到thinkphp5的文章很少，这次整理一个，希望对大家有帮助
1.使用了Bootstrap的filestyle的上传插件，layui的参考我其他的文章，对了记得引入bootstrap-filestyle.js上传js，这个是图片放大的zoomify.js如果需要图片放大预览可以也引入，jq 和Bootstrap也记得引入哦~
2.这段是html,通过插件获取图片

<!--                上传服务书-->
        <div class="ys form-group clearfix">
            <a href="javascript:;" class="a-upload">
                <input type="file" name="myFile" id="myFile" multiple="multiple" >
            </a>
            <span class="tips">（售后服务书必须填写完整，拍照必须画质清晰）</span>
            <div class="img_div">
            </div>
            <div class="shade" onclick="javascript:closeShade()">
                <div class="">
                <span class="text_span">

                </span>
                </div>
            </div>
            <div class="shadeImg" onclick="javascript:closeShadeImg()">
                <div class="">
                    <img class="showImg" src="">
                </div>
            </div>

        </div>

        <script type="text/javascript">

            $('#myFile').filestyle({
                buttonText : '点击上传',
                buttonName : 'btn-primary',
                buttonBefore : true,
                placeholder : '请上传售后服务书',
                extension: 'png,jpg,jpeg',
                type: 'img/png,img/jpg,img/jpeg',
                message: '请重新选择图片'
            });

        </script>

3.拿到图片是blob可以直接预览的我为了方便后台处理转换成base64了
4.图片先过滤一下
5.再图片转换成base64
6.生成到页面上

<!--        上传售后服务书 -->
<script type="text/javascript">
    $(function() {
        var all_urls="";
        var all_types="";
        var objUrl;
        var img_html;
        $("#myFile").change(function() {
            var img_div = $(".img_div");
            var filepath = $("input[name='myFile']").val();
            for(var i = 0; i < this.files.length; i++) {
                objUrl = getObjectURL(this.files[i]);
                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();

                if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
                    $(".shade").fadeIn(500);
                    $(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
                    this.value = "";
                    $(".img_div").html("");
                    return false;
                }
                all_types=all_types+this.files[i].type;
                //将图片转换成base64自字符
                var oFReader = new FileReader();
                oFReader.readAsDataURL(this.files[i]);
                oFReader.onload = function (oFREvent) {
                    all_urls=oFREvent.target.result; //拼接data形式base64的url
                    img_html = "<div class='isImg  col-xs-6 col-md-6'><img src=" + all_urls + " /><button class='removeBtn' onclick='javascript:removeImg(this)'>x</button></div>";
                    img_div.append(img_html);
                    $('.isImg img').zoomify();
                };

                
            }

            return true;
        });
        /*

        描述：鉴定每个浏览器上传图片url 目前没有合并到Ie
         * */
        function getObjectURL(file) {
            var url = null;
            if(window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if(window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if(window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            //console.log(url);
            return url;
        }
    });
    /*
            描述：上传图片附带删除 再次地方可以加上一个ajax进行提交到后台进行删除
     * */
    function removeImg(r){
        $(r).parent().remove();
    }
    /*
             描述：上传图片附带放大查看处理
     * */
    function lookBigImg(b){
        $(".shadeImg").fadeIn(500);
        $(".showImg").attr("src",$(b).attr("src"))
    }
    /*

        描述：关闭弹出层
     * */
    function closeShade(){
        $(".shade").fadeOut(500);
    }
    /*

        描述：关闭弹出层
     * */
    function closeShadeImg(){
        $(".shadeImg").fadeOut(500);
    }
</script>

7.上传到服务器
8.先获取如果过滤掉base641的开头，方便后台处理
9.用ajax提交到后台

            applyId=new Array();
            applyId2=new Array();
            // 截取data:image/png;base64,
            $('.isImg img').each(function(){
                var idVal = $(this).attr("src");
                var index=idVal.lastIndexOf(",");
                idVal=idVal.substring(index+1,idVal.length);
                applyId.push(idVal);
            })
            $('.isImg1 img').each(function(){
                var idVal = $(this).attr("src");
                var index=idVal.lastIndexOf(",");
                idVal=idVal.substring(index+1,idVal.length);
                applyId2.push(idVal);
            })
            // alert(applyId);
            var name=$('#yname').val();
            var phone=$('#ytel').val();
            var site=$('#demo1').val();
            var sitedetail=$('#xqdz').val();
            var description=$('#sgms').val();
            // alert(name+phone+site+sitedetail+description)
            $.ajax({
                url:"{:url('index/serve/upload')}",
                type:'post',
                data:{
                    name:name,
                    phone:phone,
                    site:site,
                    sitedetail:sitedetail,
                    description:description,
                    img:applyId,
                    imgs:applyId2
                },
                success:function(res){
                    // alert(res);
                    alert('提交成功,请耐心等待~');
                    // location.href = res.url;
                }
            })

10.处理图片和需要存储的数据

	 public function upload(){
	 	$date=input();
	 	$arr='';
	 	$arrs='';
	 	for ($i=0; $i <count($date['img']); $i++) { 
	 		$arr.=($this->Base64StrShangChuan($date['img'][$i])).',';
	 	}
	 	for ($i=0; $i <count($date['imgs']); $i++) { 
	 		$arrs.=($this->Base64StrShangChuan($date['imgs'][$i])).',';
	 	}
	 	$date['img']=$arr;
	 	$date['imgs']=$arrs;
	 	$date['create_time']=time();
	 	// return $date;
	 	if (false==Db::name('serve')->insert($date)) {

	        return $this->error('修改失败');
	        
	    } else {
	    	
 			return 1;
	        // return $this->success('修改成功','index/serve/index');
	    }

    }
       // 保存base64二维码图片
	public function Base64StrShangChuan($image){

		$imageName = "/25220_".date("His",time())."_".rand(1111,9999).'.png';  //图片名称
 
		@define('BASE_PATH',str_replace('\\','/',realpath(dirname(__FILE__).'/../../../'))."/");
 
		$path = BASE_PATH.'/public/images/'.date("Ymd");  //获取文件目录
 
		$return_url = 'images/'.date("Ymd").$imageName;

	    if (!is_dir($path)){     //判断目录是否存在 不存在就创建
	        mkdir($path,0777,true);
	    }
 
		$imageurl =  $path.$imageName;  
 		// dump($imageurl);die();
        // $image = explode(',',$image);   //截取data:image/png;base64, 这个逗号后的字符如果前台传的base64字符串已经截取过，把这一行代码注释调掉就OK

         $is_success = file_put_contents($imageurl,base64_decode($image));   //返回的是字节数 
 
        if($is_success > 0)
        {
        	$img = $return_url;
        	return $img;
        }
        else
        {
        	return false;
        }
 
	}