微信上传图片

//参数
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******************************************/
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容