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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79978608

背景

  • 前两天在做图片上传的功能优化,发现了一个效果比较好的 JQuery 插件(H5移动前端图片批量压缩上传),看其中的介绍是使用了 base64 编码的方式进行上传
  • 个人在使用过程中,做了简单处理,只需向后台传输 base64 编码数据即可,然后后台进行处理,下面主要介绍我的操作流程,可做参考.

一. 前端处理

①. js 代码修改

  • 本着不做过多更改的原则,在处理好页面布局后,我只是修改了源代码中的 upload() 方法.

处理目的: 1. 将获取的 base64 编码传到后台,如果后台顺利处理完毕,会返回它的存储路径,然后我进行了多图片存储路径在页面上(隐藏域)的拼接,方面后面提交后的数据库数据存储 2. 如果没有成功,则会返回错误提示信息

//    图片上传,将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'
        )
    }

②. 图片上传效果

  • 选取图片后的异步上传效果如下:

注意事项 1. 此时尤其注意下,向后台传输的数据是否为正确的编码 [个人开发测试时,手贱剔除了 "data:image/jpeg;base64",这一段,可不要犯同样的错误] 2. 想要知道自己的 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,"请求不合法!");
        }
    }

②. 核心函数 base64_image_content

    /**
     * [将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;
        }
    }
  • 代码中提及到的配置数据:

//为了获取绝对路径 ‘UPLOAD_IMG_BASE64_URL’ => str_replace(‘Application/Common/Conf/config.php’, ”, str_replace(‘\’, ‘/’, FILE)),

提示说明:

①. 说明:

  • 尤其说明一下,方法 file_put_contents()所要传入的 local_file_url 参数要求为绝对路径,不然会报错的啊啊啊啊啊,本人也是卡住了好半天!!!
  • 对于图片上传的 base64 编码上传,前端除了效果设计,处理逻辑相对是类似的,目的就是向后台传输规范的 base64 编码

②. 注意事项:

本文中所提供的 Jquery 插件,测试可支持 iphone7 微信内置浏览效果以及谷歌浏览器的使用,确定就是没有提供取消按钮 所以,异步图片数据的上传可能返回信息有延迟,以至于图片路径还未返回,就进行了整体表单的数据提交,造成数据遗失.

③. 附录代码

  • showMsg() 方法展示,用于 json 数据的返回
/**
 * 公用的方法  进行信息的提示
 */
function showMsg($status, $message, $data = array())
{
    $result = array(
        'status' => $status,
        'message' => $message,
        'data' => $data
    );
    exit(json_encode($result));
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏晓晨的专栏

Html页面雪花效果的实现

1.1K40
来自专栏米扑专栏

Node.js 安装与开发

52680
来自专栏ionic3+

Cordova插件使用——Themeablebrowser数据花式交互

Themeablebrowser是一个外部浏览器插件,它fork自inappbrowser,相比于后者,此插件的目的是提供一个可以与你的应用程序的主题相匹配的i...

28340
来自专栏云计算教程系列

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

17420
来自专栏葡萄城控件技术团队

带你走近AngularJS - 基本功能介绍

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创...

224100
来自专栏大史住在大前端

javascript基础修炼(6)——前端路由的基本原理

现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,...

19030
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十六):xadmin的进阶开发

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

31020
来自专栏游戏杂谈

Xcode修改项目的Build Location

可以在项目最左侧的文件列表里展开Product,查看输出文件,按住control单击可以在Finder中显示,右侧辅助区域也会看到全路径

20120
来自专栏从零开始学自动化测试

Fiddler抓包9-保存会话(save)

前言 为什么要保存会话呢?举个很简单的场景,你在上海测试某个功能接口的时候,发现了一个BUG,而开发这个接口的开发人员是北京的一家合作公司。你这时候给对方开发提...

38450
来自专栏魏艾斯博客www.vpsss.net

wordpress 网页头部有空白怎么解决

19540

扫码关注云+社区

领取腾讯云代金券