JSSDK图像接口多张图片上传下载并将图片流写入本地

[html] view plain copy print?
  1. <span style="font-size: 14px;"><!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6. <title>发布图片</title>  
  7. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  8. <meta name="apple-mobile-web-app-capable" content="yes">  
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10. <meta name="format-detection" content="telephone=no">  
  11. <link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">  
  12. </head>  
  13. <body>  
  14. <p>最多可添加9张作品</p>  
  15. <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />    
  16. <div class="imglist"></div>  
  17. <input type="hidden" id="img_str" name="img_str">   
  18. <a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>   
  19. <div class="sb">发布</div>  
  20. <script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>  
  21. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
  22. <script>    
  23. wx.config({  
  24. debug: false,  
  25. appId: '{$signPackage["appid"]}',  
  26. timestamp: {$signPackage["timestamp"]},  
  27. nonceStr: '{$signPackage["noncestr"]}',  
  28. signature: '{$signPackage["signature"]}',  
  29. jsApiList: [  
  30. // 所有要调用的 API 都要加到这个列表中  
  31. 'chooseImage','previewImage','uploadImage','downloadImage'  
  32. ]  
  33. });  
  34. wx.ready(function () {  
  35. // 5.3 上传图片  
  36. $('.uploadImage').on('click', function () {  
  37.     wx.chooseImage({  
  38.         success: function (res) {  
  39.             var localIds = res.localIds;  
  40.             syncUpload(localIds);  
  41.         }  
  42.     });  
  43. });  
  44. var syncUpload = function(localIds){  
  45.     var localId = localIds.pop();  
  46.     wx.uploadImage({  
  47.     localId: localId,  
  48.     isShowProgressTips: 1,  
  49.     success: function (res) {  
  50.         var serverId = res.serverId; // 返回图片的服务器端ID  
  51.             var str = $('#img_str').val()+serverId+',';  
  52.             $('.imglist').append("<img src='"+localId+"' />");  
  53.             $('#img_str').val(str);  
  54.         //其他对serverId做处理的代码  
  55.         if(localIds.length > 0){  
  56.         syncUpload(localIds);  
  57.         }  
  58.             if($('.imglist img').size() >= 9) {  
  59.                 $("#upload_button").hide();  
  60.             }  
  61.     },  
  62.     fail: function (res) { alert(JSON.stringify(res)); }  
  63.     });  
  64. };  
  65. });  
  66. </script>  
  67.   
  68. <script>  
  69.   
  70.   $(".sb").click(function(){  
  71.       var imglist = $(".imglist").html();  
  72.        
  73.       if(imglist == "" || imglist == null) {  
  74.          alert("请添加图片");  
  75.            return false;  
  76.       } else {  
  77.           if($(".imglist").find('img').size() >9) {  
  78.               alert("图片只允许上传9张！");  
  79.               return false;  
  80.           }  
  81.       var img_str = $('#img_str').val();  
  82.       }  
  83.   
  84.       $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){  
  85.           window.location.href = "__URL__/test";  
  86.       });  
  87.   });  
  88.   
  89. </script>  
  90. </body>  
  91. </html></span>  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>发布图片</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">
</head>
<body>
<p>最多可添加9张作品</p>
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />  
<div class="imglist"></div>
<input type="hidden" id="img_str" name="img_str"> 
<a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a> 
<div class="sb">发布</div>
<script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>  
wx.config({
debug: false,
appId: '{$signPackage["appid"]}',
timestamp: {$signPackage["timestamp"]},
nonceStr: '{$signPackage["noncestr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage','previewImage','uploadImage','downloadImage'
]
});
wx.ready(function () {
// 5.3 上传图片
$('.uploadImage').on('click', function () {
	wx.chooseImage({
		success: function (res) {
			var localIds = res.localIds;
			syncUpload(localIds);
		}
	});
});
var syncUpload = function(localIds){
	var localId = localIds.pop();
	wx.uploadImage({
	localId: localId,
	isShowProgressTips: 1,
	success: function (res) {
	    var serverId = res.serverId; // 返回图片的服务器端ID
            var str = $('#img_str').val()+serverId+',';
            $('.imglist').append("<img src='"+localId+"' />");
            $('#img_str').val(str);
	    //其他对serverId做处理的代码
	    if(localIds.length > 0){
		syncUpload(localIds);
	    }
            if($('.imglist img').size() >= 9) {
                $("#upload_button").hide();
            }
	},
	fail: function (res) { alert(JSON.stringify(res)); }
    });
};
});
</script>

<script>

  $(".sb").click(function(){
      var imglist = $(".imglist").html();
     
      if(imglist == "" || imglist == null) {
         alert("请添加图片");
           return false;
      } else {
          if($(".imglist").find('img').size() >9) {
              alert("图片只允许上传9张！");
              return false;
          }
	  var img_str = $('#img_str').val();
      }

      $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
          window.location.href = "__URL__/test";
      });
  });

</script>
</body>
</html>

后台处理 testController.php

[php] view plain copy print?
  1. <span style="font-size: 14px;">    public function test() {  
  2.     $signPackage = $this->getSignPackage();  
  3.     $this->assign('signPackage', $signPackage);  
  4.     $this->display('test');  
  5.     }</span>  
    public function test() {
	$signPackage = $this->getSignPackage();
	$this->assign('signPackage', $signPackage);
	$this->display('test');
    }
[php] view plain copy print?
  1.    <span style="font-size: 14px;">public function wxupload() {  
  2. header('Content-type:application/json;chartset=utf-8');  
  3. $img_str = I('post.img_str', '', 'string');  
  4.         $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径       
  5. $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分  
  6. if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);  
  7.               
  8. $savepath = '/Public/Upload/' . date('Y-m-d').'/';   
  9. $img_str = rtrim($img_str, ',');  
  10.   
  11. $img_arr = explode(',', $img_str);  
  12. $str = ''; //sql语句字符串  
  13. $imgs = array();  
  14.   
  15. foreach($img_arr as $v) {  
  16.     $imgs[] = $this->doWechatPic($v);  
  17. }  
  18.       
  19. $str = ''; //sql语句字符串  
  20. foreach($imgs as $v) {  
  21.     $str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";  
  22. }  
  23. $sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');  
  24. $res = M()->query($sql);           
  25.   
  26. if($res) {  
  27.      $data = array('errcode' => 0, 'msg' => '成功！');  
  28. } else {  
  29.      $data = array('errcode' => 1, 'msg' => '失败！');  
  30. }  
  31. exit( JSON($data));  
  32.    }  
  33.   
  34. /*  
  35.  * 从微信服务器获取图片流  
  36.  */    
  37. public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn     
  38.        $media_id = $serverId;//提交过来的serverId即$media_id       
  39.        $access_token    = $this->_get_wx_access_token_address( false );//获取access_token值  
  40.         
  41.         $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";    
  42.         $filebody = file_get_contents($pic_url);//通过接口获取图片流    
  43.           
  44.         $filename = uniqid().'.jpg';            //定义图片名字及格式    
  45.         return $this->saveFile($filename, $filebody);    
  46. }    
  47.     
  48. /*  
  49.  * 定义文件路径，写入图片流  
  50.  */    
  51. public function saveFile($filename, $filecontent){    
  52.   
  53.     $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径       
  54.     $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分  
  55.     if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);  
  56.     $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层    
  57.     $savepath = '.'.$upload_dir.'/'.$filename;         
  58.       
  59.     if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片    
  60.         return $upload_dir."/".$filename;//返回图片路径    
  61.     }else{    
  62.         exit(JSON('save failed'));    
  63.     }    
  64.         
  65. } </span>  
    public function wxupload() {
	header('Content-type:application/json;chartset=utf-8');
	$img_str = I('post.img_str', '', 'string');
      	$uploadROOT 	= realpath(THINK_PATH.'../Public/');//定义保存路径     
	$uploadPath 	= $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
	if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);
				
	$savepath = '/Public/Upload/' . date('Y-m-d').'/'; 
	$img_str = rtrim($img_str, ',');

	$img_arr = explode(',', $img_str);
	$str = ''; //sql语句字符串
	$imgs = array();

	foreach($img_arr as $v) {
		$imgs[] = $this->doWechatPic($v);
	}
		
	$str = ''; //sql语句字符串
	foreach($imgs as $v) {
		$str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";
	}
	$sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');
	$res = M()->query($sql);			
	
	if($res) {
		 $data = array('errcode' => 0, 'msg' => '成功！');
	} else {
		 $data = array('errcode' => 1, 'msg' => '失败！');
	}
	exit( JSON($data));
    }

	/* 
	 * 从微信服务器获取图片流 
	 */  
	public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn   
	       $media_id = $serverId;//提交过来的serverId即$media_id     
	       $access_token 	= $this->_get_wx_access_token_address( false );//获取access_token值
	      
	        $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";  
	        $filebody = file_get_contents($pic_url);//通过接口获取图片流  
	        
	        $filename = uniqid().'.jpg';            //定义图片名字及格式  
	        return $this->saveFile($filename, $filebody);  
	}  
	  
	/* 
	 * 定义文件路径，写入图片流 
	 */  
	public function saveFile($filename, $filecontent){  

	    $uploadROOT 	= realpath(THINK_PATH.'../Public/');//定义保存路径     
		$uploadPath 	= $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
		if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);
	    $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层  
	    $savepath = '.'.$upload_dir.'/'.$filename;       
	    
	    if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片  
	        return $upload_dir."/".$filename;//返回图片路径  
	    }else{  
	        exit(JSON('save failed'));  
	    }  
	      
	}

需要注意的是 access_token，signPackage参数不能错误

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yelanggu/p/8625045.html