微信图片上传 wx.Imagechoose

拍照或从手机相册中选图接口

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（官方文档少了这个参数的具体描述）

实际项目操作：

页面展示代码

</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);