目的:调用微信上传图片接口上传图片,并调用下载图片接口下载到本地
1、绑定域名
登录微信公众平台后,进入 公众号设置--》公众号设置页面如图(1),点击设置如图(2),输入域名后,点击保存。
注意:一定要MP_verify_3mOny5Qgj4Owoq0K.txt文件上传到域名所指的服务器中,如果是tomcat的话,就放在tomcat的webapp目录下即可。
图(1)
图(2)
2、在需要调用接口的页面引入js: http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3、通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '${appId}', // 必填,公众号的唯一标识
timestamp: '${timestamp}', // 必填,生成签名的时间戳
nonceStr: '${nonceStr}', // 必填,生成签名的随机串
signature: '${signature}',// 必填,签名
jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表
});
上面具体获取参数的方法见:
https://blog.csdn.net/qq_33157666/article/details/80158519
4、通过ready接口处理成功验证
上传一张图片:
html:
<div class="weui_cell"> <div class="weui_cell_hd"><label class="weui_label text_size">头像</label></div> <div class="weui_cell_bd weui_cell_primary"> <img id="headPicture" src="" class="weui-avatar" onerror="fdp.defaultImage('${ctxfs}/shop_init/user_face_01.png');"/> </div> <div class="weui_cell_ft"> <i class="weui_icon_warn"></i> </div> </div>js:
wx.ready(function(){ //点击上传图片按钮 $("body").delegate("#headPicture",'click',function(e){ var images = {localId:[],serverId:[]}; //最多可上传图片图片数 var count=1; //调用 拍照或从手机相册中选图接口 24 wx.chooseImage({ count: count,//最多可上传5张 success: function(res) { var imgUrl=res.localIds[0]; $("#headPicture").attr("src",imgUrl); //调用上传图片接口 images.localIds= res.localIds; var upload = function() { wx.uploadImage({ localId:images.localIds[0], success: function(res) { $(".serverIds").val(res.serverId); } }); }; upload(); } }); }); });
上传多张图:
html:
<div class="weui_cell weui_cell_img"> <div class="weui_uploader"> <div class="weui_uploader_bd"> <ul class="weui_uploader_files comment_imgs" id='img2'> <div class="addCommentImg"> <span class="icon icon-xiangji1"></span> <span class="commentImgcount">添加图片</span> </div> </ul> </div> </div> </div>js:
wx.ready(function(){ //点击上传图片按钮 $("body").delegate(".addCommentImg",'click',function(e){ var images = {localId:[],serverId:[]}; //最多可上传图片图片数 var count=5-$(this).siblings(".comment_img").length; //存放图片id的input var $serverIds_input=$(this).parents(".weui_panel").find("input.serverIds"); var $comment_imgs=$(this); //显示已上传图片个数的span var $commentImgcount=$(this).find("span.commentImgcount"); //获取图片id var serverIds=$serverIds_input.val(); //调用 拍照或从手机相册中选图接口 wx.chooseImage({ count: count,//最多可上传5张 success: function(res) { var comment_img_Tpl=$("#comment_img_Tpl").html(); var commentImgHtml=""; //用js模板拼接图片到页面中 for(var i=0;i<res.localIds.length;i++){ var commentImgData={"imgUrl":res.localIds[i]};//模板的数据 commentImgHtml+=wx_common.render(comment_img_Tpl,commentImgData);//渲染模板 } $comment_imgs.before(commentImgHtml); //已上传图片的数量 var validCount=$comment_imgs.siblings(".comment_img").length; $commentImgcount.text(validCount+" / "+5); //超过5张隐藏上传按钮 if(validCount==5){ $commentImgcount.parent().addClass("hide"); } //调用上传图片接口 images.localIds= res.localIds; var i = 0; var length = images.localIds.length;//循环上传多个图片 var upload = function() { wx.uploadImage({ localId:images.localIds[i], success: function(res) { serverIds+=res.serverId+","; images.serverId.push(res.serverId); $serverIds_input.val(serverIds); //如果还有照片,继续上传 i++; if (i < length) { upload(); } } }); }; upload(); } }); }); });
至此,上传已经完成,但是这是将图片上传到了微信服务器,我们需要将存到我们自己的服务器中,所以需要经图片下载到我们的服务器中。
5、下载图片
/** * 下载图片 * @param mediaIds 图片在微信服务器上对应的id * @param $imgPath_input 存图片地址的input * */ function downloadImg (mediaIds,$imgPath_input){ var flag=false; if(typeof(mediaIds)=="undefined" || mediaIds==""){ layer.closeAll(); layer.open({content: 'mediaIds不能为空',skin: 'msg',time: 2}); return flag; } var token=weixin.getToken(); if(token=="" || token==null){ layer.closeAll(); layer.open({content: 'token不能为空',skin: 'msg',time: 2}); return flag; } $.ajax({ url:"xxxxxxxxxxxxxxx", type:'POST', data:{"accessToken":"xxxx","mediaIds":mediaIds,}, dataType:'json', async: false, success:function(data){ if(data==null || !data.status || data.path==""){ return; } //下载成功后,将返回的图片地址存到页面的隐藏域中 var paths=$imgPath_input.val(); $imgPath_input.val(paths+data.path); flag=true; } }); return flag; }
java代码:
public Map<String,Object> downloadImage(String accessToken,String mediaIds) { Map<String,Object> map=new HashMap<>(); if(StringUtils.isBlank(accessToken)){ map.put("status",false); map.put("message","文件下载失败,accessToken不能为空"); return map; } if(StringUtils.isBlank(mediaIds)){ map.put("status",false); map.put("message","imgId不能为空"); return map; } if(",".equals(mediaIds.substring(0,1))){ mediaIds=mediaIds.substring(1,mediaIds.length()); } String localFilePath=""; logger.info("mediaIds:"+mediaIds); String[] media=mediaIds.split(","); logger.info("media:"+media); if(media.length>0){ for(int i=0;i<media.length;i++){ // 拼接请求地址 String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+accessToken+"&media_id="+media[i]; URL url; BufferedInputStream bis=null; HttpURLConnection conn=null; try{ url = new URL(requestUrl); conn = (HttpURLConnection) url.openConnection(); conn.setDoInput(true); conn.setRequestMethod("GET"); // 根据内容类型获取扩展名 String fileExt = getFileexpandedName(conn.getHeaderField("Content-Type")); FileStorage lf=FileStorageFcatory.get(); // 将mediaId作为文件名 bis = new BufferedInputStream(conn.getInputStream()); } String fileName="xxxxxxx";//图片存储路径 File file=new File( fileName+fileExt); localFilePath+=FileUtils.copyInputStreamToFile(bis,file)+","; }catch (Exception e){ logger.error("下载图片失败", e); map.put("status",false); map.put("message","下载图片出现错误"); return map; }finally{ try{ bis.close(); conn.disconnect(); }catch (Exception e) { e.printStackTrace(); } } } } if(StringUtils.isNotBlank(localFilePath)){ if(",".equals(localFilePath.substring(localFilePath.length()-1,localFilePath.length()))){ localFilePath=localFilePath.substring(0,localFilePath.length()-1); } } map.put("status", true); map.put("message","下载成功"); map.put("path", localFilePath); return map; }