配置并学习微信JS-SDK（2）

测试地址：http://www.qq210.com/shoutu/android

检查图像接口
选择本地或拍照的图片
上传选择的图片

预览上传的图片

//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();

                  }

                });

            }

        });

    }

下载上传的图片（用上传下载多媒体文件接口下载原文件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();

现在问题又来了，预览上传时的localId和下载后的localId区别在哪里？而这个下载后的localId的图片存储在哪里？有谁知道的请留言下？
=>明白了：我换了手机再打开公众号，发现不是我下载的图片的手机是看不到图片的，换句话说就是，下载后的图片存在了点击下载的那部手机上，擦，微信服务器只保留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;

    }

}

巴特西

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

最新文章

热门文章