关于微信调用相册,并上传显示问题,请教各位大佬
发布于 6 年前 作者 leicui 6792 次浏览 来自 问答

最近在做微信公众号项目开发,其中有调用相册,并还展示显示的图片,下面是我写的代码,出现的结果是选三张图片,最多就显示出最好一张图,不知道该怎么解决,想请教一下各位

xiangce () {

var _url = window.location.href

console.log(_url)

var that = this

this.$http.post(’/wxpay/shopscan’, {url: _url})

.then(res => {

console.log(res)

var res = res.data.data;

var appId = res.appId;

var timeStamp = res.timestamp;

var nonceStr = res.nonceStr

var signature = res.signature

var signType = res.signType

var pk = res.packageStr

var paySign = res.paySign

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: appId, // 必填,公众号的唯一标识

timestamp: timeStamp , // 必填,生成签名的时间戳

nonceStr: nonceStr, // 必填,生成签名的随机串

signature: signature,// 必填,签名,见附录1

jsApiList: [‘chooseImage’, ‘downloadImage’, ‘uploadImage’, ‘getLocalImgData’] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

wx.chooseImage({

count: 5, // 默认9

sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有

sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有

success: function (res) {

console.log(res)

var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

console.log(localIds)

console.log(that)

that.syncUpload(localIds)

}

});

wx.error(function (res) {

alert(“error:” + JSON.stringify(res));

});

}, err => {

console.log(err)

})

.catch(err => {

console.log(‘abbbbb’)

})

},

async syncUpload (localIds) {

console.log(localIds)

var localId = localIds.pop();

      wx.uploadImage({

            localId: localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得

            isShowProgressTips: 1, // 默认为1,显示进度提示

            success: function (res) {

console.log(res)

//res.serverId 返回图片的服务器端ID

var serverId = res.serverId; // 返回图片的服务器端ID

wx.downloadImage({

serverId: serverId, // 需要下载的图片的服务器端ID,由uploadImage接口获得

isShowProgressTips: 1, // 默认为1,显示进度提示

success: function (res) {

var localId = res.localId; // 返回图片下载后的本地ID

wx.getLocalImgData({

localId: localId, // 图片的localID

success: function (res) {

console.log(res)

var localData = res.localData; // localData是图片的base64数据,可以用img标签显示

// localData = localData.replace(‘jgp’, ‘jpeg’);//iOS 系统里面得到的数据,类型为 image/jgp,因此需要替换一下

// $(’#cc img’).attr(“src”, localData);

console.log(localData)

console.log(localIds.length)

var _img = ‘<li class=“li”><img src="’ + localData + ‘" alt=""><span class=“del”></span></li>’

$(’#ul’).append(_img)

if(localIds.length > 0){

console.log(‘123’)

window.setTimeout(function(){

that.syncUpload(localIds);

},100);

}else{

window.setTimeout(function(){

console.log(‘123456’)

},100);

}

}

});

}

});

 

          }

      });

},

回到顶部