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

