微信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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
ant design vue datepicker日期选择器中文化操作
Oct 28 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
PHP 全角转半角实现代码
2010/05/16 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现list反转实例汇总
2014/11/11 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
爱心助学感谢信
2015/01/21 职场文书
小学生暑假安全公约
2015/07/14 职场文书