微信JS-SDK - 图片上传

通过config接口注入权限验证配置

config内的配置参数一般由后台返回，这里是图片上传，需要使用chooseImage，uploadImage两个接口

wechatConfig(){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseImage','uploadImage'] // 必填，需要使用的JS接口列表，
});
}

注册事件

在chooseImage接口的成功回调中调用图片上传接口

temeplate:

 <div class="upload" @click="wechatFile">
        <img :src="imgurl" alt="">
   </div>

js.

data(){
            return{
                src:'',
                imgurl:'',
                
            }
        },
        created(){
            //初始化时调用在上面写的权限配置的函数
            this.wechatConfig();
            if(this.defultsrc){
                this.imgurl = this.defultsrc
            }
        },


wechatFile(){
                
                        this.$wechat.chooseImage({
                            count: 1, // 默认9
                            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                            success: (res) => {
                                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                console.log('wechat img',localIds)
                                for (var i=0;i<localIds.length;i++){
                                    //选择成功后调用上传接口
                                    this.$wechat.uploadImage({
                                        localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                                        isShowProgressTips: 1, // 默认为1，显示进度提示
                                        success: (res) => {
                                            var serverId = res.serverId; // 返回图片的服务器端ID
                                            //将服务端id传给你的后台，这个接口由后台提供
                                            this.$http({
                                                method:'post',
                                                url:'/wx/web_page/upload',
                                                data:{
                                                    // 代码需要上传服务器，否则返回为0
                                                    app_uuid:this.$common.AppUUID(),
                                                    server_id:serverId,
                                                }
                                            }).then(res=>{
                                                if (res.data.code===0){
                                                    //成功后返回图片地址
                                                    this.imgurl = res.data.data.url;
                                                    
                                                }
                                            })
                                        }
                                    });
                                }
                            }
                        });

            },