CI框架

  > 微信接口上传图片

微信接口上传图片

先贴前台代码

用的是layui的一部分上传框架,觉得也蛮好用的。

<form>
    <ul class="list_input">
        <li>
            <input type="text" name="sn" id="sn"  placeholder="编号信息*">
        </li>
        <li>
            <div class="item">
                <input  class="text" type="text" name="photo1" id="photo1"  placeholder="快递单照片*" disabled>
                <label>
                   <i class="fa fa-camera"></i>
                    <input class="file" type="button" name="" id="up1">
                </label>
            </div>
        </li>
        <li>
           <div class="item">
                <input  class="text" type="text"  placeholder="出院小结*" disabled>
                <input type="hidden" name="photo2" id="photo2" value="">
                <label >
                    <i class="fa fa-upload"></i>
                    <input class="file" type="button" name="" id="up2">
                </label>
           </div>
        </li>
    </ul>
    <div class="hint">
        <p>提示:您还可以上传 <em class="number">10</em> 张</p>
    </div>
    <ul class="fileBox">   
    </ul>
    <div class="m_btn">
        <button class="btn_next" id="sb" type="button">提交</button>
    </div>
</form>

js代码

wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '<?php echo $appId ?>', // 必填,公众号的唯一标识
        timestamp: <?php echo $timeStamp; ?>, // 必填,生成签名的时间戳
        nonceStr: '<?php echo $nonceStr; ?>', // 必填,生成签名的随机串
        signature: '<?php echo $signature ?>',// 必填,签名
        jsApiList: ['chooseImage','uploadImage','checkJsApi'] // 必填,需要使用的JS接口列表
    });

微信环境先上,很熟悉了不再解释

选图然后处理,返回服务器端

function openCamera(){

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
      layer.load();
      var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
      wx.uploadImage({
        localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
          var serverId = res.serverId; // 返回图片的服务器端ID
          $.ajax({
            type: "POST",  
            url: "index.php/upload/layui_upload_pic?type=photo1&weixin=2",  
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',  
            data: {"server_id":serverId},
            success: function(data){  
              layer.closeAll('loading'); //关闭loading
              // alert(data);
              var _data = JSON.parse(data);
              if (_data.status == 200) {
                $("#photo1").val(_data.src);
              }else{
                layer.msg(_data.msg,{icon:5,anim:6,time:1000});
              }
            },
            complete: function(){
              layer.closeAll('loading'); //关闭loading
            },
            beforeSend : function(){
              // layer.load(); //上传loading
            }
          })

        }
      });

    }
  });
}

php代码,微信上传接口

    public function layui_upload_pic()
    {

    	$weixin = $this->input->get('weixin',TRUE);


    	$type = $this->input->get('type',TRUE) ? $this->input->get('type',TRUE) : 'article';
    	$now = time();
		$upload_path = './uploads/'.$type.'/';
		if (!file_exists($upload_path)){
            mkdir ($upload_path,0777,true);
        } 

        if ( $weixin == 1 )
    	{
    		$base64_image_content = $this->input->post('src64');
    		$newname  = "wx".md5(uniqid(mt_rand()));
    		$image="data:image/jpg;base64,".$base64_image_content;
    		$src = base64_image_content($image,'uploads/test/',$newname);
    		if ( $src ) 
    		{
    			$notice = array('status'=>200,'msg'=>'操作成功','src'=>$src);
	    		echo json_encode($notice);
	    		exit;
    		} 
    		else 
    		{
    			$notice = array('status'=>201,'msg'=>'文件写入意外,请从新拍照','src'=>$src);
	    		echo json_encode($notice);
	    		exit;
    		}
    		
    		
    	}
    	elseif( $weixin == 2 )
    	{
    		$server_id = $this->input->post('server_id');
    		$access_token = $this->getAccessToken();
    		$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$server_id}";
    		$filebody = file_get_contents($url);
    		$filename  = "wx".md5(uniqid(mt_rand())).".jpg";
    		$savepath = "./uploads/kuaidihao/".$filename;
    		if(file_put_contents($savepath, $filebody)){//写入图片流生成图片  
		        $notice = array('status'=>200,'msg'=>'操作成功','src'=>"uploads/kuaidihao/".$filename);
	    		echo json_encode($notice);
	    		exit; 
		    }else{  
		        $notice = array('status'=>201,'msg'=>'文件写入意外,请从新拍照','src'=>'');
	    		echo json_encode($notice);
	    		exit;
		    } 

    		exit;


    	}



		$whitelist = array('jpg', 'jpeg', 'png', 'gif');
		$name      = null;
		$error     = 'No file uploaded.';

		if (isset($_FILES)) {
			if (isset($_FILES['file'])) {
				$tmp_name = $_FILES['file']['tmp_name'];
				$name     = basename($_FILES['file']['name']);
				$error    = $_FILES['file']['error'];
				
				if ($error === UPLOAD_ERR_OK) {
					$extension = pathinfo($name, PATHINFO_EXTENSION);
					$newname  = md5(uniqid(mt_rand())).".".$extension;
					if (!in_array($extension, $whitelist)) {
						$error = '不是正被允许的文件类型';
					} else {
						move_uploaded_file($tmp_name, $upload_path.$newname);
					}
				}
			}
		}




		if ( $error === UPLOAD_ERR_OK )
		{

			$arr = array(
				'src' 			=> 'uploads/'.$type.'/'.$newname,
				'type'			=> $type,
				'createtime'	=> time(),
				'updatetime'	=> time(),
				);

			$this->db->insert('files',$arr);

			$result = array(
	    		'code'	=> 200,
	    		'msg'	=> '上传成功',
	    		'data'	=> array('src'=>'uploads/'.$type.'/'.$newname),
	    		'error' => $error,
	    	);
		}
		else
		{
			$result = array(
	    		'code'	=> 205,
	    		'msg'	=> '上传失败',
	    		'data'	=> array('src'=>''),
	    		'error' => $error,
	    	);
		}


    	echo json_encode($result);
    	exit;
    }

结束,over,看不懂的请留言。。代码笔记。结合ci框架。

发布时间:2019-12-03,10:45:23

php公众微信号开发。图片上传笔记。

作者:澎蠡

让学习成为一种习惯,让知识交流变成一种生活方式。