调用微信上传图片接口和下载图片接口

程序员文章站 2022-05-27 08:29:08

...

目的：调用微信上传图片接口上传图片，并调用下载图片接口下载到本地

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;
}

相关标签：微信上传图片下载图片

上一篇： ps生成svg路径

下一篇：一听到他的脚步声就心跳不止

调用微信上传图片接口和下载图片接口

微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

微信公共服务平台开发（.Net 的实现）8-------处理图片(上传下载发送)

微信小程序实现图片上传、删除和预览功能的方法

微信端调取相册和摄像头功能，实现图片上传，并上传到服务器

七牛云图片上传接口调用流程

Angular2仿照微信UI实现9张图片上传和预览的示例代码

详解微信小程序文件下载--视频和图片

微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器

微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器

移动端图片上传方法【更好的兼容安卓IOS和微信】