base64 编码转化图片并进行指定路径的保存和上传处理
/u011415782/article/details/79978608
/qq_38381336/article/details/77943377
/yayayangge/article/details/83654464
解决 fakepath
/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/jpegvar 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图片格式,/article/8055.htmlvar blobToBase64=function(blob, callback) {var a = new FileReader();a.onload = function(e) {callback(e.target.result);}a.readAsDataURL(blob);};//使用方法,传入一个blob数据,在回调中接收处理成功的图片urlblobToBase64(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:\/phpstudy\/PHPTutorial\/WWW\/h_layui\/public\/static\/imgs\/1018\/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;}
