php处理微信weui图片上传

前端通过weui完成上传图片、预览图片的操作（具体可以看weui案例），然后weui请求数据是base64，php后端将base64数据转为本地保存图片，然后再对其路径和保存数据库的格式以及图片的大小、尺寸等进行编辑操作等等。

微信weui上传组件

<div class="weui-gallery" id="gallery">
    <span class="weui-gallery__img" id="galleryImg"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

<div class="weui-cell  weui-cell_uploader">
    <div class="weui-cell__bd">
        <div class="weui-uploader">
            <form method="post">
            <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
                <div class="weui-uploader__info"><span id="numb">0</span>/3</div>
            </div>
                <div id="thumb" style="display: none"></div>
            <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles">
                </ul>
                <div class="weui-uploader__input-box">
                    <input id="uploaderInput" class="weui-uploader__input js_file" name="file" type="file" accept="image/*" >
                </div>
            </div>
                <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
            </form>
        </div>
    </div>
</div>

Jquery代码

<script type="text/javascript" class="uploader js_show">
    $(function() {
        // 允许上传的图片类型
        var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];
        // 1024KB，也就是 1MB
        var maxSize = 1024 * 1024;
        // 图片最大宽度
        var maxWidth = 600;
        // 最大上传图片数量
        var maxCount = 3;
        $('.js_file').on('change', function(event) {
            var files = event.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    alert('该类型不允许上传');
                    continue;
                }
                if (file.size > maxSize) {
                    alert('图片太大，不允许上传');
                    continue;
                }
                if ($('.weui-uploader__file').length >= maxCount) {
                    alert('最多只能上传' + maxCount + '张图片');
                    continue;
                }
                reader.onload = function(e) {
                    var img = new Image();
                    img.onload = function() {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL('image/png');

                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('
                            + base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');

                        $('.weui-uploader__files').append($preview);

                        // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
                        var progress = 0;
                        function uploading() {
                            $preview.find('.weui-uploader__file-content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                // 如果是失败，塞一个失败图标
                                //$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                                $preview.removeClass('weui-uploader__file_status')
                                    .find('.weui-uploader__file-content')
                                    .remove();
                            }
                        }
                        setTimeout(uploading, 30);
                    };
                    img.src = e.target.result;
                    $.ajax({
                        url: "upload",
                        data: {img: e.target.result},
                        type: "POST",
                        dataType: "json",
                        success: function(data) {
                            if (data != '' ){
                                $( '#thumb' ).append( '<span>'+data+'</span>' );
                                $('#numb').html(function (){
                                    return parseInt($(this).html())+1
                                })
                            }
                        }
                    });

                };
                reader.readAsDataURL(file);
            }
        });

    });

    $('.weui-btn').on('click',function(){
        var thumb = new Array();
        var list = $("#thumb").children().each(function (index, element) {
            thumb.push($(this).html());
        });
        if(thumb.length <{$site.maxupload}){
            warnToast('请上传3张图片')
        }else{
            $.ajax({
                url: "add",
                data: {content: thumb,tid:123},
                type: "POST",
                dataType: "json",
                success: function(data) {
                    if(data.code == 0){
                        warnToast(data.msg)
                    }else if(data.code == 1){
                        toast(data.msg)
                    }
                }
            });
        }
    })

    $(function(){
        $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
        $uploaderInput = $("#uploaderInput"),
        $uploaderFiles = $("#uploaderFiles");

        var index; //第几张图片
        $uploaderFiles.on("click", "li", function() {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function() {
            $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            $uploaderFiles.find("li").eq(index).remove();
            $('#uploaderInput').val('');
        });
    });
</script>

php处理数据（Thinkphp5）

public function add($ids = '')
{
    if ($this->request->isPost()) {
        $tid = $this->request->post('tid');
        $content = $this->request->post('content/a');
        foreach ($content as $k=>$v){
            $content[$k] =  str_replace("../public","",$v);
        }
        $data = [
            'tid'   =>  $tid,
            'ssl'   => $this->ssl->id,
            'ssh'   =>  $this->ssh->id,
            'user_id'   =>  $this->auth->id,
            'content'   =>  json_encode($content),
        ];
        $weishengjiancha_data = new Form;
        $result = $weishengjiancha_data->where('tid',$tid)
            ->where('ssl',$this->ssl->id)
            ->where('ssh',$this->ssh->id)->find();
        if(!$result){
            $weishengjiancha_data->save($data);
            $this->success('填报成功');
        }else{
            $this->error('已经填报');
        }
    }
    $this->assign('tid',$ids);
    return $this->view->fetch();
}

public function upload()
{
    if ($this->request->isPost()) {
        $img  = isset( $_POST [ 'img' ])?  $_POST [ 'img' ] :  '' ;
        return $this->base64_image_content($img,'../public/uploads/');
    }
}


/**
 * 将Base64图片转换为本地图片并保存
 * @param  $base64_image_content 要保存的Base64
 * @param  $path 要保存的路径
 */
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())."/";
        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)))){
            //返回这个图片的路径
            $image = \think\Image::open($new_file);
            // 按照原图的比例生成一个最大为500*500
            //$image->thumb(500, 500)->save($new_file);
            $image->thumb(500, 500)->text(config('site.footer'),ROOT_PATH.'public/Alibaba-PuHuiTi-Bold.ttf',20,'#ffffff')->save($new_file);
            return $new_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
}