拍照或從手機相冊中選圖接口
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" alt="" 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);
},