微信公众号上传图片到本地服务器 JS-SDK

1.配置JS接口安全域名,获取微信签名

2.前端代码

        wx.ready(function () {
            wx.chooseImage({
                count: 9-count,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    console.log(res);
                    $.each(res.localIds,function (k,v) {
                        wx.getLocalImgData({
                            localId: v, // 图片的localID
                            success: function (res) {
                                // console.log(res.localData)
                                var src = res.localData
                                if (src.indexOf('data:image') == 0) {
                                    //苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接
                                } else {
                                    //此处是安卓中的唯一得坑!在拼接前需要对localData进行换行符的全局替换
                                    //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                                    src = 'data:image/jpeg;base64,' + src.replace(/\n/g, '');
                                }
                                $.ajax({
                                    url: '',
                                    type: 'post',
                                    async:false,
                                    data:{
                                        src: src,
                                    },
                                    beforeSend: function () {

                                    }, success: function (res) {
                                       if (res.success) {
                                           pics.push(res.data.path)
                                           console.log(pics)
                                           $('input[name="content"]').val(pics);
                                           var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>'
                                           $uploaderFiles = $("#uploaderFiles")
                                           $uploaderFiles.append($(tmpl.replace('#url#', src)));
                                        }else{
                                           layer.open({
                                               content: res.msg
                                               ,skin: 'msg'
                                               ,time: 2 //2秒后自动关闭
                                           });
                                           return false;
                                       }
                                  }, complete: function () {

                                   }
                                })
                            }
                        });
                    });
                }
            });
        });

3.后端上传

        $file_data = $this->request->param('src');
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $file_data, $result)) {
            //处理base64字符串
            $img_base64 = str_replace($result[1], '', $file_data);
            $img_base64 = str_replace('=', '', $img_base64);
            //判断文件大小
            $img_len = strlen($img_base64);
            $file_size = $img_len - ($img_len / 8) * 2;
            $file_size = number_format(($file_size), 2);
            if ($file_size > (1024 * 1024 * 10)) {
                return Response::Error('图片大小不能超过10M');
            }
            $source_img = base64_decode($img_base64);
            //构造文件保存路径
            $fiel_dir = 'upload/home/base64/' .date('Y-m-d') .'/';
            $file_name = getFileName();
            if(!is_dir($fiel_dir)){
                mkdir($fiel_dir, 0777,true);
            }
            //后缀
            $img_suffix = $result[2];//文件后缀
            //文件名
            //文件完整路径
            $filepath = $fiel_dir . $file_name . "." . $img_suffix;

            //上传文件
            try {
                file_put_contents($filepath, $source_img);
                $upload_result = array('path'=>'/'.$filepath);
                return Response::Okdata($upload_result,'上传成功');
            } catch (Exception $e) {
                $upload_result = array('err_info'=>$e->getMessage());
                return Response::Errordata($upload_result,'上传失败');
            }
        }else{
            $upload_result = array('status' => false, 'msg'=>'上传失败','err_info'=>'请携带base64字符串的前缀');
            return $upload_result;
        }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值