H5⽆刷新上传图⽚到企业素材
最近在做企业审核接⼝，⽂字数据之类的提交都好说，但是上传附件时候企业接⼝只接受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-heigh </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，所以上传图⽚时候对图⽚进⾏了图⽚压缩处理。
附件控件（control参数为File，且value参数为files）
{
"files": [
{
"file_id": "1G6nrLmr5EC3MMb_-zK1dDdzmd0p7cNliYu9V5w7o8K1aaa"
}
]
}
这是为什么要⽣成media_id的原因
参数说明
files附件列表
└
file_id ⽂件id，该id为临时素材上传接⼝返回的的media_id，注：提单后将作为单据内容转换为长期⽂件存储；⽬前⼀个审批申请单，全局仅⽀持上传6个附件，否则将失败。
下⾯去看看接⼝的⽂档说明
使⽤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 = "qyapi.weixin.qq/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->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 = "qyapi.weixin.qq/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安全校验。 // 如果在部署过程中代码在此处验证失败，请到 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");
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论