配置并学习微信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

demo效果：

其他：

• 为了记录执行过程和调试代码，提交日志到服务器并记录日志
  • 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;
    
        }
    
    }