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

时间：2023-03-09 21:46:14
JSSDK图像接口多张图片上传下载并将图片流写入本地
  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. <script>
  68. $(".sb").click(function(){
  69. var imglist = $(".imglist").html();
  70. if(imglist == "" || imglist == null) {
  71. alert("请添加图片");
  72. return false;
  73. } else {
  74. if($(".imglist").find('img').size() >9) {
  75. alert("图片只允许上传9张！");
  76. return false;
  77. }
  78. var img_str = $('#img_str').val();
  79. }
  80. $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
  81. window.location.href = "__URL__/test";
  82. });
  83. });
  84. </script>
  85. </body>
  86. </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

  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');

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