首先利用微信JS-SDK接口，借助微信高效地使用拍照、选图，上传至微信服务器，然后通过微信多媒体接口下载图片到自己的服务器。

1、获取全局的access_token和jsapi_ticket以作备用

使用全局的access_token用来获取jsapi_ticket，并通过微信多媒体接口下载图片到自己的服务器。jsapi_ticket是公众号用于调用微信JS接口的临时票据，用来前端页面调取微信的拍照、选图、上传服务器功能。此过程之前文章已说明，不做详细介绍。
附连接：微信开发中的access_token和jsapi_ticket

2、使用jsapi_ticket生成SDK权限验证JS-权限签名

参与签名的字段包括
noncestr（随机字符串）,
jsapi_ticket
timestamp（时间戳）
url（当前网页的URL，不包含#及其后面部分）

1、对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1，这里需要注意的是所有参数名均为小写字符。
2、对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
注意事项：
1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2、签名用的url必须是调用JS接口页面的完整URL。
3、出于安全考虑，开发者必须在服务器端实现签名的逻辑

protected function shareConfig(){$time=time();//获取当前页面的连接$localUrl='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];//按照字典序拼接字符串$str="jsapi_ticket=".getAccessToken('jsapi_ticket')."&noncestr=".$time."&timestamp=".$time."&url=".$localUrl;//选择前台要调用的js接口列表 //【chooseImage】  【uploadImage】  【previewImage】$this->assign('share_function',json_encode(['onMenuShareTimeline', 'onMenuShareAppMessage','getLocation','chooseImage','uploadImage','downloadImage','previewImage']));//做sha1加密，生成签名$this->assign('share_signature',sha1($str));$this->assign('share_time',$time);$this->assign('share_appid',$this->appid);
}

3、通过config接口注入权限验证配置（所有需要使用JS-SDK的页面必须先注入配置信息）

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
当debug模式，出现错误时，具体查看【微信调用config 接口，开启debug模式，常见错误及解决方法】

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({debug: true,           //false:关闭调试   开启调试模式,调用的所有api的返回值会在客户端alert出来appId: "{$share_appid}",              // 必填，公众号的唯一标识timestamp: "{$share_time}",      // 必填，生成签名的时间戳nonceStr: "{$share_time}",            // 必填，生成签名的随机串signature: "{$share_signature}",  // 必填，签名jsApiList:{$share_function}            // 必填，需要使用的JS接口列表
});
//error接口，失败时用来查找具体原因
wx.error(function (res) {if (res.errMsg = 'config:invalid signature') {//alert("转发接口失效，请联系管理员");}
});
</script>

4、选择图片并上传到微信服务器

权限验证配置完成后，通过ready接口处理成功验证。

1、调用【chooseImage】拍照或从手机相册中选图接口，挑选要上传的图片
2、调用【uploadImage】上传图片接口，把图片上传到微信服务器。
注：【uploadImage】上传图片有效期3天，此处获得的 serverId 即 media_id

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID//此处将取得的图片服务器id写入form表单中，等待提交至后台处理$("input[name='image']").val(serverId);}});}});
});

5、后台调用微信多媒体接口，下载并保存图片到自己的服务器

调用微信下载多媒体文件接口下载图片到自己服务器：https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

注意：
1、临时素材media_id是可复用的。
2、媒体文件在微信后台保存时间为3天，即3天后media_id失效。
3、上传临时素材的格式、大小限制与公众平台官网一致。

图片（image）: 2M，支持PNG\JPEG\JPG\GIF格式
语音（voice）：2M，播放长度不超过60s，支持AMR\MP3格式
视频（video）：10MB，支持MP4格式
缩略图（thumb）：64KB，支持JPG格式

//此处的$image为前台上传的图片的serverId
$url = 'https://api.weixin.qq.com/cgi-bin/media/get?access_token=' . $this->access_token . '&media_id=' . $image;
//读取微信服务器图片
$image = file_get_contents($url);
//图片存放的路径
$img_url = '/Public/wx/image/';
if (!is_dir('.' . $img_url)) {mkdir('.' . $img_url, 0777, true);
}
$img_url .= date('Y_m_d') . '_' . time() . '.png';
//写入图片
file_put_contents('.' . $img_url, $image);

参考链接 :

微信:JS-SDK说明文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

微信:获取临时素材https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_temporary_materials.html

微信公众号调用微信接口上传图片相关推荐

微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
Vue开发微信公众号调用微信JS-SDK的分享接口（实现微信公众号分享功能）
描述使用微信提供的分享功能,其实就是JSSDK使用,使用它提供的接口功能. 可以先看下微信公众号开发文档,上面介绍的很详细.提供了那些功能,怎么去使用. https://developers.wei ...
vue 微信公众号支付接口_vue页面在微信公众号调用支付接口
// 点击了点击购买按钮 async handlePurchase() { const vm = this // 获取选中的套餐信息,用的是axios的post方法,因此要包装一下params con ...
微信公众号调用红包接口
微信的红包接口已经提供了详细的说明.在使用之前需要先开通然后记得充钱.微信发红包金额1-200,单位是分. <?php define('APPID','adfadf98735123'); // ...
微信公众号调用接口显示的错误码含义
微信公众号调用接口显示的错误码含义返回码说明 -1 系统繁忙,此时请开发者稍候再试 0 请求成功 40001 获取 access_token 时 AppSecret 错误, ...
微信企业号或微信公众号调用扫一扫功能
微信企业号或微信公众号调用扫一扫功能 JS-SDK安全域名配置配置设置好之后下面就上代码 java代码签名校验 JS-SDK安全域名配置企业微信号 -- 安全域名配置需要通过验证(如下图) 微信 ...
php 公众号指定人发消息,微信公众号客服接口给指定用户openid发送消息
微信公众号客服接口给指定用户openid发送消息 2018-09-23 微信开发文档: 客服接口-发消息接口调用请求说明 http请求方式: POSThttps://api.weixin.qq.co ...
微信公众号文章搜索接口9大详解
微信公众号作为一个重要的自媒体平台,越来越受到人们的关注.而对于那些想要提高自己公众号文章点击率的人来说,微信公众号文章搜索接口是一个不可或缺的工具.本文将从以下9个方面详细介绍微信公众号文章搜索接口 ...
微信公众号查题接口API
微信公众号查题接口API 本平台优点: 多题库查题.独立后台.响应速度快.全网平台可查.功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库: 查题校园题库:查题校园题库后台(点击跳 ...

微信公众号调用微信接口上传图片