微信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 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
PHP 数组教程 定义数组
2009/10/23 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
高中自我评价分享
2013/12/05 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
给公司的建议书范文
2014/05/13 职场文书
电子信息工程自荐信
2014/05/26 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
股东授权委托书
2014/10/15 职场文书
保送生自荐信范文
2015/03/26 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL