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

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

上一篇:margin-bottom在IE6、IE7失效的原因


下一篇:微信 JSSDK .NET版