使用微信JS-SDK图像接口上传图片简单实例

2024-12-24 技术教程

1.完整实现ios和安卓微信环境选择微信相册图片并上传保存在本地
2.注意js版本兼容，使用该版本

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

官方解释

3.本实例流程将先调用wx.chooseImage接口获取选择的图片localId，返回localId在安卓微信可以作为img标签的src属性显示图片，但在ios下需要再调用wx.getLocalImgData接口来显示图片，然后要保存图片需调用wx.uploadImage接口将图片上传至微信服务器返回serverId，将serverId放至隐藏域提交后端，由后端调用微信多媒体接口下载保存到自己服务器，多媒体获取接口为：

http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="token()"&media_id="serverId"

4.前端核心代码如下：

.......... <div class="upload-box"> <div class="z_file"> <div id="uploaderBox"></div> </div> {volist name='question.reply_img' id='item'} {if condition="$item"} <div class="z_addImg"> <a class="shc-btn shc-btn-id" href="javascript:;"></a> <img src="{$item|default=""}"> <input name="edit_img_key[]" value="{$item}"></input> </div> {/if} {/volist} </div>..........wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId:"{$signPackage.appId}", timestamp:"{$signPackage.timestamp}", nonceStr:"{$signPackage.nonceStr}", signature:"{$signPackage.signature}", jsApiList: [ // 所有要调用的 API 都要加到这个列表中 'uploadImage', 'chooseImage', 'getLocalImgData', ] }); var imgContainer = document.getElementsByClassName("upload-box")[0]; $("#uploaderBox").on("click", function(e) { wx.chooseImage({ count: 9, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 var i = 0, length = localIds.length;//循环操作9张图片 function upload() { var serverId = ''; wx.uploadImage({ localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (res) { serverId = res.serverId; // 返回图片的服务器端ID if(agent_type == 'android') { var localData = localIds[i]; // localData是图片的base64数据，可以用img标签显示 //追加html var img = document.createElement("img"); var input = document.createElement("input"); var ass = document.createElement("a"); img.setAttribute("src", localData); input.setAttribute("name", "serverId[]"); input.setAttribute("value", serverId); var imgAdd = document.createElement("div"); imgAdd.setAttribute("class", "z_addImg"); ass.setAttribute("class", "shc-btn"); ass.setAttribute("id", "shc-btn"+id); ass.setAttribute("href", "javascript:;"); imgAdd.appendChild(ass); imgAdd.appendChild(img); imgAdd.appendChild(input); imgContainer.appendChild(imgAdd); imgRemove(id);//删除按钮 id++; } else { wx.getLocalImgData({ localId: localIds[i], // 图片的localID success: function (res) { var localData = res.localData; // localData是图片的base64数据，可以用img标签显示 var img = document.createElement("img"); var input = document.createElement("input"); var ass = document.createElement("a"); img.setAttribute("src", localData); input.setAttribute("name", "serverId[]"); input.setAttribute("value", serverId); var imgAdd = document.createElement("div"); imgAdd.setAttribute("class", "z_addImg"); ass.setAttribute("class", "shc-btn"); ass.setAttribute("id", "shc-btn"+id); ass.setAttribute("href", "javascript:;"); imgAdd.appendChild(ass); imgAdd.appendChild(img); imgAdd.appendChild(input); imgContainer.appendChild(imgAdd); imgRemove(id); id++; } }); } i++; if (i < length) { upload(); } } }); } upload(); } }); });

5.后端核心代码如下：

foreach ($data['serverId'] as $key => $value) { $str = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".获取token."&media_id=".$value; $a = file_get_contents($str); if($a) { $resource = fopen(ROOT_PATH."/uploads/".$value.".jpg" , 'w+'); fwrite($resource, $a); fclose($resource); $imgs[] = "/uploads/".$value.".jpg"; } }

效果截图