微信圖片上傳 wx.Imagechoose
阿新 • • 發佈:2018-04-27
服務器端 compress 列表 tostring .get wechat set asset nbsp
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); },
拍照或從手機相冊中選圖接口
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次/天,如需要調高頻率,請郵件[email protected],郵件主題為【申請多媒體接口調用量】,請對你的項目進行簡單描述,附上產品體驗鏈接,並對用戶量和使用量進行說明。
以上是微信官方文檔
以上接口的使用除開預覽圖片接口都需要完成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); },
微信圖片上傳 wx.Imagechoose