微信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,//默认9
sizeType:['original'],
sourceType:['album','camera'],
success:function(res){
varlocalId=res.localIds[0];
$('#localId').text(localId);
//选择图片成功，上传到微信服务器
wx.uploadImage({
localId:localId,//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
varserverId=res.serverId;//返回图片的服务器端ID
$('#serverId').text(serverId);
}
});
}
});
实例2、下载，刚上传的图片，指定serverID
varserverId=$('#serverId').text();
wx.downloadImage({
serverId:serverId,//需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
varlocalId=res.localId;//返回图片下载后的本地ID
$('#imgTarget').attr('src',localId);
}
});
从微信客户端获取用户文件，方法2，
可以使用html的File文件域，读取客户端文件，然后上传到服务器
<divclass="container"> <!--图片类型验证方法1--> <inputtype="file"id="file"multipleaccept="image/*"/> <inputtype="button"id="btn1"value="选择上传文件"onclick="showFiles();"/> <h4>选择文件如下:</h4> <imgsrc=""id="img1"/> </div>
Js代码：
//读取图片，并上传到服务器实例
varfileBox=document.getElementById('file');
functionshowFiles(){
//获取选择文件的数组
varfileList=fileBox.files;
for(vari=0;i<fileList.length;i++){
varfile=fileList[i];
//图片类型验证第二种方式
if(/image\/\w+/.test(file.type))
readFile(file);
else
console.log(file.name+':不是图片');
}
}
//读取图片内容为DataURL
functionreadFile(file){
varreader=newFileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
varresult=reader.result;
$('#img1').attr('src',result)
upload(result);
}
//上传到自己的服务器
functionupload(dataUrl){
vardata=dataUrl.split(',')[1];
//数据结果是转换,转换成二进制数据
data=window.atob(data);
varuint=newUint8Array(data.length)
for(vari=0;i<data.length;i++){
uint[i]=data.charCodeAt(i);
}
varblob=newBlob([uint],{type:'image/jpeg'});
//上传到服务器
varfd=newFormData();
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('开始上传');
varxhr=newXMLHttpRequest();
xhr.open('post','/common/upload',true);
//监听事件
xhr.onreadystatechange=function(e){
if(xhr.readyState==4&&xhr.status==200){
vardata=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){
varlocalId=res.localIds[0];
//获取图片对象
try{
varimg=newImage();
//此设置在微信浏览器中无效,也不会抛出异常，后面的代码不会执行
img.setAttribute('crossOrigin','anonymous');
img.onload=function(){
varcanvas=document.getElementById('canvasOne');
varctx=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);
}
}
});
//上传到自己的服务器
functionupload(canvas){
//由于toDataURL()的浏览器安全问题，如果不是同一个域的图片会抛出异常
//所以此处
vardata=canvas.toDataURL('image/jpeg');
data=data.split(',')[1];
alert(data.length);
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。