微信js-sdk上传与下载图片接口用法示例


Posted in Javascript onOctober 12, 2016

本文实例讲述了微信js-sdk上传与下载图片接口用法。分享给大家供大家参考,具体如下:

前提已经在wx.config()中,将图片接口验证通过。

微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的。以官方文档为准

注:

1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx

2.上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id,参考文档 http://mp.weixin.qq.com/wiki/12/58bfcfabbd501c7cd77c19bd9cfa8354.html

3.目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

实例1、选择单个图片并上传到微信服务器

//选择图片单个图片
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    $('#localId').text(localId);
    //选择图片成功,上传到微信服务器
    wx.uploadImage({
      localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1,显示进度提示
      success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
        $('#serverId').text(serverId);
      }
    });
  }
});

实例2、下载,刚上传的图片,指定serverID

var serverId=$('#serverId').text();
wx.downloadImage({
  serverId: serverId, // 需要下载的图片的服务器端ID,由uploadImage接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var localId = res.localId; // 返回图片下载后的本地ID
    $('#imgTarget').attr('src',localId);
  }
});

从微信客户端获取用户文件,方法2,
可以使用html的File文件域,读取客户端文件,然后上传到服务器

<div class="container">
  <!--图片类型验证方法1-->
  <input type="file" id="file" multiple accept="image/*" />
  <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
  <h4>选择文件如下:</h4>
  <img src="" id="img1" />
</div>

Js代码:

//读取图片,并上传到服务器实例
var fileBox = document.getElementById('file');
function showFiles() {
  //获取选择文件的数组
  var fileList = fileBox.files;
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i];
    //图片类型验证第二种方式
    if (/image\/\w+/.test(file.type))
      readFile(file);
    else
      console.log(file.name + ':不是图片');
  }
}
//读取图片内容 为DataURL
function readFile(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    var result = reader.result;
    $('#img1').attr('src', result)
    upload(result);
  }
  //上传到自己的服务器
  function upload(dataUrl){
    var data=dataUrl.split(',')[1];
    //数据结果是转换,转换成二进制数据
    data=window.atob(data);
    var uint=new Uint8Array(data.length)
    for (var i = 0; i < data.length; i++) {
      uint[i]=data.charCodeAt(i);
    }
    var blob=new Blob([uint],{type:'image/jpeg'});
    //上传到服务器
    var fd=new FormData();
    fd.append('file',blob);
    fd.append('isclip', '-1');
    fd.append('maxsize', 1024*1024*10);
    fd.append('minsize', 0);
    fd.append('subfolder', '1');
    fd.append('automove',true);
    fd.append('extention', '.jpg');
    alert('开始上传');
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/common/upload', true);
    //监听事件
    xhr.onreadystatechange = function (e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var data = eval('(' + xhr.responseText + ')');
        if (data.success == true) {
          alert('上传成功:');
          alert(data.msg);
        } else {
          alert(data.msg);
        }
      } else {
        //alert(xhr.readyState);
      }
    }
    xhr.send(fd);
  }
}

读取客户端图片,方法3,目前无效,代码仅供参考

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    //获取图片对象
    try {
      var img=new Image();
      //此设置在微信浏览器中无效,也不会抛出异常,后面的代码不会执行
      img.setAttribute('crossOrigin', 'anonymous');
      img.onload=function(){
        var canvas=document.getElementById('canvasOne');
        var ctx=canvas.getContext('2d');
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,0,0,img.width,img.height);
        try {
          upload(canvas);
        } catch (e) {
          alert(e.name);
          alert(e.message);
        }
      }
      img.src=localId;
    } catch (e) {
      alert(e.name);
      alert(e.message);
    }
  }
});
//上传到自己的服务器
function upload(canvas){
  //由于toDataURL()的浏览器安全问题,如果不是同一个域的图片会抛出异常
  //所以此处
  var data=canvas.toDataURL('image/jpeg');
  data=data.split(',')[1];
  alert(data.length);
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
vue cli 全面解析
Feb 28 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
webpack+vue.js快速入门教程
Oct 12 #Javascript
jquery 抽奖小程序实现代码
Oct 12 #Javascript
微信js-sdk地理位置接口用法示例
Oct 12 #Javascript
vue.js表格组件开发的实例详解
Oct 12 #Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 #Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 #Javascript
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
js模拟微博发布消息
2017/02/23 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
js中的闭包实例展示
2018/11/01 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
解析Python中的异常处理
2015/04/28 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
班班通校本培训方案
2014/03/12 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
公司年会开场白
2015/06/01 职场文书
无工作证明怎么写
2015/06/15 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS