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

本文实例讲述了微信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, // 默认9sizeType: ["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）;elseconsole.log（file.name + ":不是图片"）;}}//读取图片内容 为DataURLfunction 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, // 默认9sizeType: ["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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。