JS之 解决fakepath问题，并实现base64图片上传(单图上传)

base64 编码转化图片并进行指定路径的保存和上传处理

https://blog.csdn.net/u011415782/article/details/79978608
https://blog.csdn.net/qq_38381336/article/details/77943377
https://blog.csdn.net/yayayangge/article/details/83654464

解决 fakepath

https://blog.csdn.net/weixin_39762926/article/details/79610154

页面 html 中

 <form class="form-horizontal m-t" method="post" enctype="multipart/form-data" action="#">
        <div class="row">
             <div class="col-md-6">
                 <div class="image-crop" style="margin-bottom:-20px;">
                     <img class="img-circle" style="width:64px;height:64px;" src="{$avatar}">
                 </div>
             </div>
             <div class="col-md-6" style="margin-top:70px;margin-left:10px;">
                 <h4>图片预览：</h4>
                 <div class="btn-group">
                     <label title="上传图片" for="inputImage" class="btn btn-primary">
                
 			<!-- 方法1 -->
 			<img name="image" id="myimage" src="" style="width:80px;height:100px;margin-left:-175px;margin-bottom:20px;"/>
 			<input id="files" name="avatar" type="file" value="选择" onchange="changeImge(this)">
 			<input id="successimg" type="hidden" value="" >
 			
                     </label>
                 </div>
             </div>
         </div>
         <p></p>
         <label><button class="btn btn-primary-red" id="edit" type="submit">提交</button></label>
     </form>

js

<script>

function changeImge(obj) {

    var f = obj.files[0];
    var filePath = obj;
    var type = f.type;     //image/jpeg
    var size = f.size;
    var tp = type.split("/")[0];
   
    if (tp != "image" || size > 10*1024*1024){
        alert("请选择图片-10MB内！")
        return false;
    }
    var element = document.getElementById('myimage');

    if (filePath != null && filePath != "") {
        //获取文件路径
        element.src = window.URL.createObjectURL(obj.files[0]);    // 这个函数用来预览本地图片或者视频

            // 用下面的两个方法，可以把blob图片格式转成base64图片格式,https://www.zhaokeli.com/article/8055.html
            
            var blobToBase64=function(blob, callback) {
                var a = new FileReader();
                a.onload = function(e) {
                    callback(e.target.result);
                }
                a.readAsDataURL(blob);
            };

            //使用方法,传入一个blob数据,在回调中接收处理成功的图片url
            blobToBase64(obj.files[0], function(data) {
                // $('#successimg img').attr('src', data);   // 赋值
                $('#successimg').val(data);   // 赋值
            });
    }
}

// 获取 图片地址

$('#edit').on('click', function(){
    var img = $("#successimg").val();   // base64 格式
    $.ajax({
        type: 'POST',
        url:  "/admin/user/save_avatar",
        data: {
          url: img
        },
        dataType: 'json',
        success: function(data){
            if (data.status == 1) {
                alert("编辑成功");
            } else {
                // alert(222);
                alert("编辑失败");
            }
        }
    });
})

// blob 转化成 base64
// function blobToDataURL(blob) {
//         var a = new FileReader();
//         a.readAsDataURL(blob);//读取文件保存在result中
//         a.onload = function (e) {
//         var getRes = e.target.result;//读取的结果在result中
//         }
//  }


</script>

控制器中

// 获取新上传的头像

public function save_avatar(){

	// $file = request()->file("avatar");    
	$data = $_POST;
	$base64_image_content = $data['url'];
	$path = $_SERVER['DOCUMENT_ROOT'].'/static/imgs';    // 上传到的文件夹
	
	//匹配出图片的格式,将Base64图片转换为本地图片并保存
	
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];
        $new_file = $path."/".date('Ymd',time())."/";
        if(!file_exists($new_file)){
            //检查是否有该文件夹，如果没有就创建，并给予最高权限
            mkdir($new_file, 0700);
        }

        $new_file = $new_file.time().".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
        	// "\/E:\/phpstudy2018\/PHPTutorial\/WWW\/h_layui\/public\/static\/imgs\/20191018\/1571384359.jpeg"
        	
            // return '/'.$new_file;

            // 修改数据库  sp_admin
            
            $udata = session::get('USER_INFO');
			$uid = $udata['uid'];

			$where['id'] = $uid;
			$new = explode('public',$new_file);
			
			$bb['touxiang'] = $new[1];

			$res =  DB::name('admin')->where($where)->update($bb);
			if($res){
				$rs=json(1); 
			}else{
				$rs=json(0); 
			}
			return $rs;
        }else{
            return false;
        }
    }else{
        return false;
    }
	die;
}