H5无刷新上传图片到企业微信素材

最新推荐文章于 2023-02-24 10:23:36 发布

qq_28471389

最新推荐文章于 2023-02-24 10:23:36 发布

阅读量655

点赞数

分类专栏：企业微信 H5 文章标签：微信 javascript html

本文链接：https://blog.csdn.net/qq_28471389/article/details/120018244

版权

H5 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

企业微信

2 篇文章 0 订阅

订阅专栏

最近在做企业微信审核接口，文字数据之类的提交都好说，但是上传附件时候企业微信接口只接受media_id,下面讲下如果把本地图片上传到企业微信素材

先上H5的代码，无刷新上传图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片上传</title>		
		<script src="static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<div class="upload">
				<img src="static/images/upload.png" id="uppic">
				<form id="form" enctype="multipart/form-data" method="post" >
					<input type="file" onchange="avatar_upload(this)" id="avatar_uploder"  name='photo1'/>
				</form>
			</div>		
				
		</div>
		<div class="mengban"></div>
		<div class="imgloading">图片上传中请稍后...</div>
		<style type="text/css">
			.upload{position:relative;}
			#uppic{max-width: 150px;}
			#avatar_uploder{opacity: 0;  position: absolute; left: 0; top: 0;}
			.mengban{width: 100%;display: none;height: 100%;background-color: rgba(0,0,0,.8); position: fixed; top: 0;left: 0; z-index: 10;}
			.imgloading{position: fixed; width: 100%; height: 30pc;  text-align: center; color: #fff;font-size: .24rem; top: 50%; left: 0%; margin: -0.5rem 0 0 -1.5rem; line-height: 1rem; z-index: 100;display: none;}
		</style>
		<script type="text/javascript">
			$('#uppic').click(function(){
			    $('#avatar_uploder').click();
			});
			
			function avatar_upload(){
					var data = new FormData($('#form')[0]);					
					$(".mengban,.imgloading").show();
			        $.ajax({
			            url: "/portal/up/uploadone",//文件地址
			            type: 'POST',
			            cache: false,//关闭缓存
			            data: data,
			 
			            processData: false,
			 
			            contentType: false,
			            success:function(data){
							data = JSON.parse(data); 
			            	$(".mengban,.imgloading").hide();
			                $('#upic').val(data.thumpimg);
			                $("#uppic").attr('src',data.thumpimg)
			                alert(data.msg);
			            }
			    });
			
			}
		</script>
	</body>
</html>

为了好看利用样式把上传图片的input框用图片代替，通过代码也能看出来就是放一张图片，然后把input设计透明度为0就是看不到，点击图片的时候利用jquery设置相当于是点了上传图片的按钮。

后端图片上传

下面是服务器端上传图片的代码,上传图片后返回上传图片地址，通过AJAX加载到前端页面展示，服务器上的图片通过CURLFile封装data，然后POST请求企业微信的上传素材接口，生成media_id绑定到前端input.这样前端的数据就准备好了。因为接口是有限制图片大小不能超2M，所以上传图片时候对图片进行了图片压缩处理。

https://work.weixin.qq.com/api/doc/90000/90135/91853

附件控件（control参数为File，且value参数为files）

{
    "files": [
        {
            "file_id": "1G6nrLmr5EC3MMb_-zK1dDdzmd0p7cNliYu9V5w7o8K1aaa"
        }
    ]
}

这是为什么要生成media_id的原因

参数	说明
files	附件列表
└ file_id	文件id，该id为临时素材上传接口返回的的media_id，注：提单后将作为单据内容转换为长期文件存储；目前一个审批申请单，全局仅支持上传6个附件，否则将失败。

下面去看看接口的文档说明

https://work.weixin.qq.com/api/doc/90000/90135/90253

请求方式：POST（HTTPS）
请求地址：https://qyapi.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE

使用multipart/form-data POST上传文件，文件标识名为”media”
参数说明：

参数	必须	说明
access_token	是	调用接口凭证
type	是	媒体文件类型，分别有图片（image）、语音（voice）、视频（video），普通文件（file）

POST的请求包中，form-data中媒体文件标识，应包含有 filename、filelength、content-type等信息，下面就开始撸代码

<?php
// +----------------------------------------------------------------------
// | Author: SUPERW
// +----------------------------------------------------------------------
namespace app\portal\controller;
use cmf\controller\HomeBaseController;
use topthink\thinkImage;

class UpController extends HomeBaseController
{	
    
	public function uploadone(){
		vendor('Zhongxue.jssdk');
		$weixin = new \JSSDK("企业微信COPID","应用的秘钥");
		$token = $weixin->index();
		
	    $file = request()->file('photo1');
	    $info = $file->validate(['size'=>15678000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');
	    if($info){
			$imgurl = "./uploads/".$info->getSaveName();
			$thumpimg ="./uploads/thump/".$info->getFilename();
			$cimg = "/uploads/thump/".$info->getFilename();
			$newimg = $_SERVER['DOCUMENT_ROOT']."/uploads/thump/".$info->getFilename();
			$image = \think\Image::open($imgurl);
			$image->thumb(1000,1000)->save($thumpimg);
			
			$mdeia = new \CURLFile($newimg,'image/jpeg',$info->getFilename());
			// var_dump($mdeia);exit;
			$dataimg= array(
				"media"=>$mdeia
			);
			
			// 发起POST请求上传临时素材
			$url = "https://qyapi.weixin.qq.com/cgi-bin/media/upload?access_token=".$token."&type=image&debug=1";
			$res = json_decode($weixin->httpPost($url,$dataimg),TRUE);			
			
			$data['thumpimg']= $cimg;
			$data['msg']='文件上传成功';
			$data['res']=$res;
			echo json_encode($data);
		}else{
	       // 上传失败获取错误信息
	       $data['msg']='上传失败,请重试！';
		   echo json_encode($data);
		}
	 
	   
	}	
	
}

access_token获取

这个是请示获取access_token的类，把请求到token储存到access_token.php文件里面保存，7000秒（这个access_token有效期是7200秒）重新请求获取，避免重复请求。

<?php
class JSSDK {
  private $appId;
  private $appSecret;

  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
	$this->filePath = __DIR__.'/';
  }
  
  public function index(){
	  return $token = $this->getAccessToken();	 
  }


  private function getAccessToken() {
    // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode($this->get_php_file($this->filePath."access_token.php"));
    if ($data->expire_time < time()) {
      // 如果是企业号用以下URL获取access_token
      $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $res = json_decode($this->httpGet($url),TRUE);
      $access_token = $res['access_token'];
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $this->set_php_file($this->filePath."access_token.php", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

  public function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
    // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);

    $res = curl_exec($curl);
    curl_close($curl);

    return $res;
  }
  
  public function httpPost($url , $data=array()){  
          $ch = curl_init();  
          curl_setopt($ch, CURLOPT_URL, $url);  
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);  
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);  
          // POST数据  
          curl_setopt($ch, CURLOPT_POST, 1);  
          // 把post的变量加上  
          curl_setopt($ch, CURLOPT_POSTFIELDS, $data);  
          $output = curl_exec($ch);  
          curl_close($ch);  
          return $output;  
    }


  private function get_php_file($filename) {
    return trim(substr(file_get_contents($filename), 15));
  }
  private function set_php_file($filename, $content) {
    $fp = fopen($filename, "w");
    fwrite($fp, "<?php exit();?>" . $content);
    fclose($fp);
  }
}

最后就是提交审核，方法前面有文章讲过，感兴趣的朋友可以去翻阅。

qq_28471389

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5无刷新上传图片到企业微信素材

最近在做企业微信审核接口，文字数据之类的提交都好说，但是上传附件时候企业微信接口只接受media_id,下面讲下如果把本地图片上传到企业微信素材先上H5的代码，无刷新上传图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片上传</title> <script src="static/js/jquery.js" type="tex
复制链接

扫一扫

专栏目录