微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
本文實(shí)例講述了微信小程序?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, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī),默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的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) {
//獲取當(dāng)前圖片的下標(biāo)
var index = e.currentTarget.dataset.index;
//所有圖片
var imgs = this.data.imgs;
wx.previewImage({
//當(dāng)前顯示圖片
current: imgs[index],
//所有圖片
urls: imgs
})
}
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼
這篇文章主要介紹了ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
JS使用for in有序獲取對(duì)象數(shù)據(jù)
這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下2016-03-03
原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測(cè))
這篇文章主要介紹了原生js實(shí)現(xiàn)會(huì)動(dòng)的小球,碰撞檢測(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例
這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式
Base64是一種用64個(gè)字符來表示任意二進(jìn)制數(shù)據(jù)的方法,這篇文章主要為大家介紹了如何實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式,感興趣的小伙伴可以學(xué)習(xí)一下2023-07-07
前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)的相關(guān)資料,url地址拼接是經(jīng)常會(huì)遇到的問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解
今天小編就為大家分享一篇Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10

