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

//选择图片单个图片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);      }    });  }});

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);  }});

<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>

//读取图片，并上传到服务器实例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 + ':不是图片');  }}//读取图片内容 为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);  }}

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);}