微信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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
JS实现购物车基本功能
Nov 08 Javascript
javascript实现移动端轮播图
Dec 09 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
重置版战役片段
2020/04/09 魔兽争霸
php下获取客户端ip地址的函数
2010/03/15 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python PyQt5整理介绍
2020/04/01 Python
django中related_name的用法说明
2020/05/20 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
.net工程师笔试题
2012/06/09 面试题
餐厅总经理岗位职责
2013/12/31 职场文书
企业后勤岗位职责
2014/02/28 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
学校社会实践活动总结
2014/07/03 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
初中教师个人工作总结
2015/02/10 职场文书
工程质检员岗位职责
2015/04/08 职场文书
男人帮观后感
2015/06/18 职场文书