微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
更新時間:2017年12月18日 09:51:48 作者:anLazyAnt
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法,涉及微信小程序界面布局、事件響應(yīng)及圖片操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法。分享給大家供大家參考,具體如下:
這里主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預(yù)覽
布局
<view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image> <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view> </view> <view class="upload-img-btn" bindtap="chooseImg"></view> </view>
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 }); }, // 預(yù)覽圖片 previewImg: function (e) { //獲取當前圖片的下標 var index = e.currentTarget.dataset.index; //所有圖片 var imgs = this.data.imgs; wx.previewImage({ //當前顯示圖片 current: imgs[index], //所有圖片 urls: imgs }) }
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
ElementUI table無縫循環(huán)滾動的示例代碼
這篇文章主要介紹了ElementUI table無縫循環(huán)滾動的示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08JS實現(xiàn)將圖片轉(zhuǎn)為base64格式
Base64是一種用64個字符來表示任意二進制數(shù)據(jù)的方法,這篇文章主要為大家介紹了如何實現(xiàn)將圖片轉(zhuǎn)為base64格式,感興趣的小伙伴可以學習一下2023-07-07Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解
今天小編就為大家分享一篇Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10