微信上传图片

//参数
data(){
    return {
        localIds:[],//新的localIds和旧的图片
        newlocalIds:[],//新上传的localIds
        serverId:[],//新上传的serverId   最终要的  旧的localIds和新的serverId
        mark:false,
    }
  },

/************************************** 回显图片 start******************************************/
mounted(){
    this.$http.jsonp('https://www.yunshuxie.com//v1/web/game/get_my_game_opus.json').then(function(res){
            if(res.body.returnCode==0){
                if(res.body.data){
                    this.localIds=res.body.data.slice();//slice防止地址引用
                    this.serverId=res.body.data.slice();
                }else{
                    this.localIds=[];
                }
            }else{
                console.log(res)
                this.$vux.alert.show({
                title: '验证码错误',
                content: '验证码错误',
            })
            }
        },function(res){
            this.$vux.alert.show({
            title: '接口错误',
            content: '接口错误！',
        })
    })
  },
/************************************** 回显图片 end******************************************/

methods:{
/************************************** 添加图片 start******************************************/
  _uploadpict(){ 
        if(this.isWeixin){
            var _self=this;
            wx.ready( function () {
                try{
                    wx.chooseImage({
                        count: 5-_self.localIds.length, // 默认9
                        sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            _self.localIds=_self.localIds.concat(res.localIds);
                            _self.newlocalIds=_self.newlocalIds.concat(res.localIds);
                            // _self.newlocalIds=_self.newlocalIds.concat(res.localIds);
                            // alert(_self.localIds.length)
                            // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            // syncUpload(localIds);
                            console.log('new_ser:'+_self.newlocalIds);
                        }
                    });
                } catch(error) {
                }
            })
        }else{
        }
    }, 
  /************************************** 添加图片 end******************************************/
 /************************************** 删除图片 start******************************************/
    _clonecover(e,index){
        console.log('ok')
        e.stopPropagation();
        if(this.localIds.length>1){
            var val=this.localIds[index];
            var ind=this.newlocalIds.indexOf(val);
            var ind2=this.serverId.indexOf(val);
            if(ind!=-1){//newlocalIds删除
                this.newlocalIds.splice(ind,1);
            }   
            if(ind2!=-1){//serverId删除
                this.serverId.splice(ind2,1);
            }
            this.localIds.splice(index,1);
        }else{
            this.$vux.alert.show({
                title: '至少要保留一张图片啊！',
            })
        }
    },
 /************************************** 删除图片 end******************************************/
 /************************************** 预览图片 start******************************************/
    _enlarge(val){
        var _self=this;
        wx.ready( function () {
            wx.previewImage({
                current: val, // 当前显示图片的http链接
                urls: _self.localIds  // 需要预览的图片http链接列表
            });
        })
    },
/************************************** 预览图片 end******************************************/
/************************************** 上传图片 start******************************************/
    syncUpload(localIds){//上传图片
        var _self=this;
        var newlocalIdslength=this.newlocalIds.length;
        // var length=localIds.length;
        var localId = localIds.pop();
        var num=localIds.length;
        this.$vux.loading.show({
            text: `上传第${newlocalIdslength-num}张！`,
        })
        if(typeof(localId) != "undefined"){
            wx.uploadImage({
              localId: localId,
              isShowProgressTips: 0,
              success: function (res) {
                console.log('结果:length'+localIds.length+'localId'+localId)
               //其他对serverId做处理的代码
                _self.$vux.loading.hide();
                _self.serverId.push(res.serverId);
                console.log("res.serverId：" + res.serverId);
                console.log("_self.serverId：" + _self.serverId);
                _self.syncUpload(localIds);
              }
            });
        }else{
            _self.$vux.loading.show({
                text: `全部上传成功`,
            })

            _self.$http.jsonp('https://www.yunshuxie.com//v1/web/game/submit_game_opus.json',{
                    params: {
                        mediaId:_self.serverId.join(',')
                    }
                }).then(function(res){
                    if(res.body.returnCode==0){
                        console.log(res);
                        _self.mark=true;
                        _self.serverId=[];
                    }else{
                        _self.$vux.alert.show({
                        title: '接口错误',
                        content: '接口错误',
                    })
                    }
                },function(res){
                    _self.$vux.alert.show({
                    title: '接口错误',
                    content: '接口错误！',
                })
            })
            setTimeout(()=>{
                _self.$vux.loading.hide();
            },1000);
        }
    },
    _noopenup(){
        var _self=this;
        var localIds=_self.newlocalIds.slice();
        if(localIds.length!=0){
            this.syncUpload(localIds);
        }else{
            _self.$http.jsonp('https://www.yunshuxie.com//v1/web/game/submit_game_opus.json',{
                    params: {
                        mediaId:_self.serverId.join(',')
                    }
                }).then(function(res){
                    if(res.body.returnCode==0){
                        _self.$vux.alert.show({
                            title: '保存成功！',
                            content: '保存成功！',
                        })
                        _self.serverId=[];
                    }else{
                        _self.$vux.alert.show({
                            title: '接口错误',
                            content: '接口错误',
                        })
                    }
                },function(res){
                    _self.$vux.alert.show({
                        title: '接口错误',
                        content: '接口错误！',
                    })
            })
        }
    }
/************************************** 上传图片 end******************************************/
}