最近在做企业微信审核接口,文字数据之类的提交都好说,但是上传附件时候企业微信接口只接受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);
}
}
最后就是提交审核,方法前面有文章讲过,感兴趣的朋友可以去翻阅。