本文实例讲述了微信js-sdk上传与下载图片接口用法。分享给大家供大家参考，具体如下：

  前提已经在wx.config()中,将图片接口验证通过。

  微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的。以为准

  注：

  1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx

  2.上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id，参考文档

  3.目前多媒体文件下载接口的频率限制为10000次/天js上传图片到服务器，如需要调高频率js上传图片到服务器，请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】，请对你的项目进行简单描述，附上产品体验链接，并对用户量和使用量进行说明。

  实例1、选择单个图片并上传到微信服务器

  <pre class="prettyprint linenums">
//选择图片单个图片
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);
  }
});

}
});
</pre>

  实例2、下载，刚上传的图片，指定serverID

  <pre class="prettyprint linenums">
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);

}
});
</pre>

  从微信客户端获取用户文件，方法2，

  可以使用html的File文件域，读取客户端文件，然后上传到服务器

  <pre class="prettyprint linenums">

选择文件如下:

</pre>

  Js代码：

  <pre class="prettyprint linenums">
//读取图片，并上传到服务器实例
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);

}
}
</pre>

  读取客户端图片，方法3，目前无效，代码仅供参考

  <pre class="prettyprint linenums">
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);
}
</pre>

  更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

  希望本文所述对大家JavaScript程序设计有所帮助。