本文實例講述了微信小程序實現圖片上傳、刪除和預覽功能的方法。分享給大家供大家參考,具體如下:
創新互聯堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都做網站、成都網站制作、企業官網、英文網站、手機端網站、網站推廣等服務,滿足客戶于互聯網時代的定南網站設計、移動媒體設計的需求,幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴!
這里主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預覽
布局
JS處理
data: { imgs: [] }, // 上傳圖片 chooseImg: function (e) { var that = this; var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () { that.setData({ lenMore: 0 }); }, 2500); return false; } wx.chooseImage({ // count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; var imgs = that.data.imgs; // console.log(tempFilePaths + '----'); for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length >= 9) { that.setData({ imgs: imgs }); return false; } else { imgs.push(tempFilePaths[i]); } } // console.log(imgs); that.setData({ imgs: imgs }); } }); }, // 刪除圖片 deleteImg: function (e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); }, // 預覽圖片 previewImg: function (e) { //獲取當前圖片的下標 var index = e.currentTarget.dataset.index; //所有圖片 var imgs = this.data.imgs; wx.previewImage({ //當前顯示圖片 current: imgs[index], //所有圖片 urls: imgs }) }
希望本文所述對大家微信小程序開發有所幫助。