配置並學習微信JS-SDK（2）—圖片接口

測試地址：http://www.qq210.com/shoutu/android

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://www.qq210.com/shoutu/android）;=======折騰好久 發現訂閱號沒有上傳下載多媒體文件接口，暈喔 也就是這能用它下載圖片的接口了

   //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://www.qq210.com/shoutu/android

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