微信图片上传 wx.Imagechoose
时间:2018-04-27 19:50:52
收藏:0
阅读:234
拍照或从手机相册中选图接口
wx.chooseImage({ count: 1, // 默认9 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
预览图片接口
wx.previewImage({ current: ‘‘, // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 });
上传图片接口
wx.uploadImage({ localId: ‘‘, // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID } });
备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id,参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。
以上是微信官方文档
以上接口的使用除开预览图片接口都需要完成config配置才可使用。
下面来看ios版微信无法回调success而直接走了fail问题所在,
wx.chooseImage({ count: 1, // 默认9 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
可以看到以上接口中count:1//默认9,经过测试,9包括9以下的数字都正常使用。而当填写的数量大于9时,在android上任然可以正常使用,只是使用的数量限制任然为9。也就是说单次最多可选择9张图片,我在项目中因为上传最多支持20张图,所以我填写的是count:20,这样就导致了我的项目在ios上可正常执行。而ios就报错,直接走fail回调。
解决方法:
这个count最大只能填写9(官方文档少了这个参数的具体描述)
实际项目操作:
页面展示代码
<div class="aImg">
<span v-for="(img,index) in info.imgs" class="imgSpan">
<img :src="img" class="imgSingle" >
<img @click="delImg(index)" class="delImg" src="../assets/imgDel.png"/>
</span>
</div>
点击选择图片:
upPhoto() {
var _this = this;
// this.info.show = false;
var imgCout = 5 - _this.info.imgs.length;
if(imgCout<=0){
MessageBox(‘提示‘, ‘最多只能传五张照片‘);
return false;
}
// _this.images.serverId = ‘‘;
// _this.info.imgs = [];
//上传图片
wx.chooseImage({
count: imgCout, // 默认9
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// _this.images.localId = res.localIds;返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// _this.info.imgs.push(res.localIds);
_this.info.quxiaos = true;
_this.info.x = true;
// _this.info.imgs = _this.info.imgs.concat(res.localIds);
_this.syncUpload(res.localIds);
}
});
},
syncUpload(localIds) {
let _this = this;
let localId = localIds.shift();
wx.uploadImage({
localId: localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 0, // 默认为1,显示进度提示
success: function (res) {
//获取serverId
// alert(‘拿到serverid‘+res.serverId);
_this.info.imgs.push(localId);
if(_this.info.imgs.length>0){
_this.info.updown = false;
}
else{
_this.info.updown = true;
}
_this.images.serverId += ‘,‘ + res.serverId;
setTimeout(function () {
if(localIds.length > 0) {
_this.syncUpload(localIds);
}else {
_this.isWx(_this.images.serverId);
}
},0);
},
});
},
isWx(x) {
let _this = this;
_this.axios.get(_this.$store.state.weChatUrl + ‘/weixinFHW/consultation/imgInfo‘,{
params: {
serviceId: x
}
}).then(function ( response) {
let imgUrl = response.data.positivePhoto;
_this.info.quxiaos = false;
_this.info.x = false;
_this.positivePhoto = imgUrl;
})
},
删除的操作
delImg(index){
let _this =this;
_this.info.imgs.splice(index,1);
if(_this.info.imgs.length>0){
_this.info.updown = false;
}
else{
_this.info.updown = true;
}
_this.images.serverId = _this.images.serverId.split(‘,‘);
_this.images.serverId.splice(index+1,1);
_this.images.serverId = _this.images.serverId.join(‘,‘);
_this.isWx(_this.images.serverId);
},
评论(0)