美文网首页
微信上传图片

微信上传图片

作者: 0efb885b580c | 来源:发表于2017-06-19 12:39 被阅读0次
    //参数
    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******************************************/
    }
    

    相关文章

      网友评论

          本文标题:微信上传图片

          本文链接:https://www.haomeiwen.com/subject/bwrgqxtx.html