背景
-
前两天在做图片上传的功能优化,发现了一个效果比较好的
JQuery
插件(H5移动前端图片批量压缩上传),看其中的介绍是使用了base64
编码的方式进行上传 -
个人在使用过程中,做了简单处理,只需向后台传输
base64
编码数据即可,然后后台进行处理,下面主要介绍我的操作流程,可做参考.
一. 前端处理
①. js 代码修改
-
本着不做过多更改的原则,在处理好页面布局后,我只是修改了源代码中的
upload()
方法.
处理目的:
将获取的
base64
编码传到后台,如果后台顺利处理完毕,会返回它的存储路径,然后我进行了多图片存储路径在页面上(隐藏域)的拼接,方面后面提交后的数据库数据存储如果没有成功,则会返回错误提示信息
// 图片上传,将base64的图片转成二进制对象,塞进formdata上传 function upload(basestr, type, $li) { var text = window.atob(basestr.split(",")[1]); var buffer = new Uint8Array(text.length); for (var i = 0; i < text.length; i++) { buffer[i] = text.charCodeAt(i); } var toUrl = "{:U('Order/ajaxUploadCommentImgs')}"; $.post( toUrl, {'basestr':basestr}, function (res) { if (res.status){ var imgStr = $(".imgStr").val(); $(".imgStr").val(imgStr+"^^"+res.message); }else { layer.msg(res.message); } },'JSON' ) }123456789101112131415161718192021
②. 图片上传效果
-
选取图片后的异步上传效果如下:
注意事项
此时尤其注意下,向后台传输的数据是否为正确的编码 [个人开发测试时,手贱剔除了
"data:image/jpeg;base64"
,这一段,可不要犯同样的错误]想要知道自己的
base64
编码是否正确,建议使用 在线转换工具 测试一下
二. 后台处理
①. ajax 提交的处理接口
-
其中会调用后面的
base64_image_content()
方法,注意下面我的showMsg()
方法,实现的功能就是向前端返回处理后的json
数据.
public function ajaxUploadCommentImgs(){ $postData = I('post.'); if(IS_AJAX && IS_POST){ $uploadUrl = "Public/Upload"; $tagUrl = $this->base64_image_content($postData['basestr'],$uploadUrl); if ($tagUrl){ //TODO 将其写入数据库 return showMsg(1,$tagUrl); }else{ return showMsg(0,'图片上传失败!'); } }else{ return showMsg(0,"请求不合法!"); } }123456789101112131415
②. 核心函数 base64_image_content
-
该函数,我所参考的来源为 PHP将Base64图片转换为本地图片并保存,在此我根据自己的业务进行了相关处理
/** * [将Base64图片转换为本地图片并保存] * @param $base64_image_content [要保存的Base64] * @param $path [要保存的路径] * @return bool|string */ public function base64_image_content($base64_image_content,$path){ //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $type = $result[2]; $new_file = $path."/".date('Ymd',time())."/"; $basePutUrl = C('UPLOAD_IMG_BASE64_URL').$new_file; if(!file_exists($basePutUrl)){ //检查是否有该文件夹,如果没有就创建,并给予最高权限 mkdir($basePutUrl, 0700); } $ping_url = genRandomString(8).time().".{$type}"; $ftp_image_upload_url = $new_file.$ping_url; $local_file_url = $basePutUrl.$ping_url; if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], '', $base64_image_content)))){ //TODO 个人业务的FTP 账号图片上传 ftp_upload(C('REMOTE_ROOT').$ftp_image_upload_url,$local_file_url); return $ftp_image_upload_url; }else{ return false; } }else{ return false; } }1234567891011121314151617181920212223242526272829303132
-
代码中提及到的配置数据:
//为了获取绝对路径
‘UPLOAD_IMG_BASE64_URL’ => str_replace(‘Application/Common/Conf/config.php’, ‘’, str_replace(’\’, ‘/’, FILE)),
提示说明:
①. 说明:
-
尤其说明一下,方法
file_put_contents()
所要传入的local_file_url
参数要求为绝对路径,不然会报错的啊啊啊啊啊,本人也是卡住了好半天!!! -
对于图片上传的
base64
编码上传,前端除了效果设计,处理逻辑相对是类似的,目的就是向后台传输规范的base64
编码
②. 注意事项:
本文中所提供的
Jquery
插件,测试可支持iphone7
微信内置浏览效果以及谷歌浏览器的使用,确定就是没有提供取消按钮
所以,异步图片数据的上传可能返回信息有延迟,以至于图片路径还未返回,就进行了整体表单的数据提交,造成数据遗失.
-
推荐文章: PHP base64转换成图片
③. 附录代码
-
showMsg()
方法展示,用于json
数据的返回
/** * 公用的方法 进行信息的提示 */function showMsg($status, $message, $data = array()){ $result = array( 'status' => $status, 'message' => $message, 'data' => $data ); exit(json_encode($result));}