配置并学习微信JS-SDK（2）—图片接口

1. 检查图像接口
2. 选择本地或拍照的图片
3. 上传选择的图片
4. 预览上传的图片

   //1.检查图像接口
       document.querySelector(‘#chooseImage‘).onclick = function() {
           log_msg(‘检查api‘);
           unvaild_api = [];
           wx.checkJsApi({
             jsApiList:[
               ‘chooseImage‘,
               ‘previewImage‘,
               ‘uploadImage‘,
               ‘downloadImage‘,
             ],
             success:function(res){
               log_msg(‘返回检查api的结果‘);
   
               log_msg(‘1.判断检查api的结果‘);
               $.each(res.checkResult, function(k, v) {
   
                   if (!v) {
                       unvaild_api.push(k);
                       return false;
                   }
               });
   
               if (unvaild_api.length > 0) {
                   log_msg(‘存在无效api‘+unvaild_api.join(‘, ‘));
                   log_msg(‘存在无效api的结果‘+unvaild_api.join(‘, ‘));
                   return false;
               }
               log_msg(‘无无效api‘);
   
               var images = {
                 localIds: [],
                 serverId: []
               };
   
               //2.选择本地或拍照的图片
                   wx.chooseImage({
                       success: function (res) {
                           log_msg("返回选定照片的本地ID列表或拍照图片ID"+JSON.stringify(res));
                           images.localIds = res.localIds;
                           log_msg(‘已选择 ‘ + images.localIds.length + ‘ 张图片‘);
                           log_msg(‘图片地址: ‘ + images.localIds.join(‘, ‘));
       
                           //3.上传选择的图片(递归)
                           var i = 0, length = images.localIds.length;
                           var imgs_html = [];
                           var upload = function(){
                               log_msg("上传图片第"+i+‘图片‘);
                               wx.uploadImage({
                                   localId:images.localIds[i],
                                   success: function(res) {
                                       log_msg(‘记录res.serverId‘+res.serverId);
                                       images.serverId.push(res.serverId);
                                       imgs_html.push(‘<img src="‘+images.localIds[i]+‘"/>‘);
                                       log_msg(‘已上传‘+images.localIds[i]+i+‘/‘+length);
                                       //如果还有照片，继续上传
                                       i++;
                                       if (i < length) {
                                           upload();
                                       }
                                       else {
                                           //4.预览上传的图片
                                           $("#img_wrap").html(imgs_html.join(‘‘));
                                           log_msg("上传成功");
                                       }
                                   }
                               });                     
                           };
   
                           log_msg("开始上传图片");
                           upload();
                     }
                   });
               }
           });
       }

5. 下载上传的图片（用上传下载多媒体文件接口下载原文件http://mp.weixin.qq.com/wiki/12/58bfcfabbd501c7cd77c19bd9cfa8354.html）;=======折腾很久 发现订阅号没有上传下载多媒体文件接口，晕喔 也就是这能用它下载图片的接口了

   //4.显示下载后的相片
   var img_html = ‘‘;
   i = 0;//重置i
   var download = function(){
       wx.downloadImage({
           serverId:images.serverIds[i],
           success:function(res){
               log_msg(‘下载第‘+i+‘张图片的结果：‘+JSON.stringify(res));
               img_html += ‘<img src="‘+res.localId+‘" />‘;
   
               //如果还有下载的图片，继续下载
               i++;
               if (i < length) {
                   download();
               }
               else{
                   $("#img_wrap").html(img_html);
               }
   
           } 
       });                                            
   }
   log_msg("开始下载图片");
   download();

   1. 现在问题又来了，预览上传时的localId和下载后的localId区别在哪里？而这个下载后的localId的图片存储在哪里？有谁知道的请留言下？
   2. =>明白了：我换了手机再打开公众号，发现不是我下载的图片的手机是看不到图片的，换句话说就是，下载后的图片存在了点击下载的那部手机上，擦，微信服务器只保留3天照片，订阅号又下载多媒体文件没权限，之后也只能强制手机下载到本地保存了！哎！

demo地址：http://jdhu.sinaapp.com

其他：

• 为了记录执行过程和调试代码，提交日志到服务器并记录日志
  • js部分

    var log_msg = function(msg){
        $.post(‘<?=site_url("log/index")?>‘, {msg:msg});        
    }

  • php部分

    class Log extends SAE_Controller {
    
        public function index()
        {
            $msg = $this->input->post(‘msg‘);
            log_message(‘error‘, $msg);
            echo $msg;
        }
    }