成都网站建设设计

将想法与焦点和您一起共享

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

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

在金山等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、网站建设、外贸网站建设 网站设计制作按需求定制网站,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,成都外贸网站建设,金山网站建设费用合理。

官方解释
使用微信JS-SDK图像接口上传图片简单实例
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.前端核心代码如下:

.....
.....
        
{volist name='question.reply_img' id='item'} {if condition="$item"}
{/if} {/volist}
..... ..... 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";
                }
            }

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


标题名称:使用微信JS-SDK图像接口上传图片简单实例
本文来源:http://chengdu.cdxwcx.cn/article/pdjpcj.html