• 概述

  在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考。

  • 图片上传
$(function(){var signUrl = location.href.split('#')[0];signUrl = encodeURIComponent(signUrl);$.ajax({type:"POST",url: webPath.webRoot + "/wxsdk/getWeixinJsConfig.json",data:{'signUrl':signUrl},dataType:'json',success:function(msg) {if(msg.result == "success"){var weixinJsSdkConfig = msg.weixinJsSdkConfig;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: weixinJsSdkConfig.appId, // 必填,公众号的唯一标识timestamp: weixinJsSdkConfig.timestamp, // 必填,生成签名的时间戳nonceStr: weixinJsSdkConfig.nonceStr, // 必填,生成签名的随机串signature: weixinJsSdkConfig.signature,// 必填,签名,见附录1jsApiList: ['chooseImage', 'uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                });}else{showError("初始化失败,请稍后再试。");}},error:function(XMLHttpRequest, textStatus) {if (XMLHttpRequest.status == 500) {var result = eval("(" + XMLHttpRequest.responseText + ")");showError(result.errorObject.errorText);return false;}}});
});function chooseImage(count){var serverIdArray = null;wx.chooseImage({count: count, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片if(!isEmpty(localIds)){var len = localIds.length;serverIdArray = new Array(len);for(var i=0;i<len;i++){wx.uploadImage({localId: localIds[i], // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {serverIdArray[i] = res.serverId; // 返回图片的服务器端ID}});}}}});return serverIdArray;
}//判空
function isEmpty(obj){if(obj==undefined || obj==null){return true;}else{return false;}
}

  • 图片下载

  调用微信JS上传完图片后,微信服务器会返回一个图片的服务器端ID(即为media_id),通过这个ID即可以把图片下载到自己的服务器保存。下载逻辑代码如下:

@Override
public String downloadImgFromWeixin(String outputPath, String mediaId) {try {Map<String, String> param = new HashMap<String, String>();param.put("access_token", getAccessToken().trim());param.put("media_id", mediaId);return WeixinWebUtil.doGet("https://api.weixin.qq.com/cgi-bin/media/get", param, "UTF-8", 3000, 3000, outputPath);} catch (IOException e) {logger.error("通过media_id:" + mediaId + "下载图片失败");throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{e.getMessage()});}
}

欢迎转载,转载必须标明出处

转载于:https://www.cnblogs.com/rexfang/p/6588127.html

微信JS图片上传与下载功能--微信JS系列文章(三)相关推荐

  1. js图片上传预览功能

    最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. php 微信 语音,微信语音的上传与下载功能实现详解

    这篇文章主要介绍了微信语音上传 下载功能实例代码,需要的朋友可以参考下 假如现在有一个按钮 按住 说话 下面就是调用微信jssdk的方法var recorder; var btnRecord = $( ...

  3. 微信jssdk图片上传给服务器,使用微信JSSDK进行图片选择和上传

    2015-04-28 2018-08-21 06:20:42 最近我在用 PHP 做某微信公众号的开发,其中用到了微信jssdk进行图片的选择和上传.在参考了微信官方提供的jssdk文档之后,大致有了 ...

  4. 微信企业号开发(七)---图片上传与下载

    1.微信企业号图片上传与下载是微信企业号上传临时素材文件中一个小部门,微信企业号上传临时素材文件包括上传图片.语音.视频等媒体资源文件以及普通文件(如doc,ppt),接口返回媒体资源标识ID:med ...

  5. web安全:JS纯前端实现图片或文件安全的上传和下载功能

    背景 在做前端开发的过程中,做过很多的项目,都会遇到图片预览和展示.一般的图片都是用于页面美化,信息解释说明的作用.但是在接触某些业务场景时,例如用户注册需要上传用户个人身份证照片,办理业务需要上传证 ...

  6. php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...

  7. js实现图片上传预览功能

    js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...

  8. vue+element实现图片上传及裁剪功能(vue-cropper)

    需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...

  9. java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能

    Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...

最新文章

  1. 零基础入门学习Python(13)-字符串
  2. 2.1.5 编码与调制
  3. 783. 二叉搜索树节点最小距离
  4. 创建一个html网页,创建第一个HTML网页(未完待续)
  5. android edittext 不可编辑
  6. 私有云之迷思:未来是什么?
  7. CSS兼容性解决方法!important的IE7,Firefox问题
  8. 系统学习机器学习之神经网络(十一) --TDNN
  9. html 默认ie设置,如何设置ie为默认浏览器,教您如何设置ie为默认浏览器
  10. 咪咕音乐播放器 ubuntu 安装详解
  11. 1.1 异步复位的串联T触发器 ---- always中慎用 非阻塞
  12. Uc页面加载完毕后页面字体变大
  13. Pale Moon 苍月浏览器 24.0.1 发布
  14. 联想电脑虚拟化开启方法
  15. win11右键菜单缺少“新建“选项解决办法“
  16. vue如何把html转换word,vue导出html、word和pdf的实现代码
  17. C# RadioButton: 单选按钮控件
  18. MacOS 10.15 Laravel框架 使用 Box/Spout 导入导出Excel
  19. KETTLE文本文件输入
  20. FBEC大会 | 全球元宇宙CEO峰会演讲干货汇总

热门文章

  1. 【Java从0到架构师】JS_jQuery_BootStrap
  2. sqlserver命令行修改用户登录密码
  3. hibernate 读取mysql表结构_为什么要用hibernate 与基于数据库表结构的项目开发
  4. 一文讲清:数据分析与数据挖掘到底有什么区别?
  5. 如何用“向上管理”搞垮一个团队?
  6. 应届生月薪2W,财务人却不涨薪?那是你不会这种财务分析
  7. 别被忽悠了!我来谈谈大数据平台的4个要点,你们写的都不是干货
  8. 如何做出有价值的竞品分析?
  9. 报表填报时,如何实现多个单元格绑定一个字段?
  10. java做网页客户端_如何成为 Java web开发者