微信小程序(15)--上傳圖片公用組件(2)
阿新 • • 發佈:2018-07-15
ide png target 所有 sin cti mon cat out
接下來開始寫寫上傳圖片的公用組件,可以自定義上傳幾張圖片。
chooseImage文件夾裏面的index.wxml和index.js,涉及圖片上傳,刪除,預覽。
<view class="img-v clearfix"> <view class="img-chooseImage" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg" class="list-img"></image> <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"><image src="../../../image/close.png"></image></view> </view> <view class="upload-img-btn" bindtap="chooseImg" hidden=‘{{ishide}}‘><image class="add-img" src="../../../image/add-img.jpg"></image></view> </view>
Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, properties: { count: String //父子傳參 }, /** * 頁面的初始數據 */ data: { imgs: [], count:1, ishide:false }, // 上傳圖片 methods: { 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({ sizeType: [‘original‘, ‘compressed‘], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; var imgs = that.data.imgs; // console.log(tempFilePaths + ‘----‘); console.log(that.data.count); for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length > that.data.count-1) { that.setData({ imgs: imgs }); return false; } else { imgs.push(tempFilePaths[i]); if (imgs.length > that.data.count-1){ that.setData({ ishide: true }); } } } // console.log(imgs); that.setData({ imgs: imgs }); that.triggerEvent("chooseImg");//觸發回調 } }); }, // 刪除圖片 deleteImg: function (e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); if (imgs.length < this.data.count) { // console.log(imgs.length); this.setData({ ishide: false }); } this.triggerEvent("deleteImg");//觸發回調 }, // 預覽圖片 previewImg: function (e) { //獲取當前圖片的下標 var index = e.currentTarget.dataset.index; //所有圖片 var imgs = this.data.imgs; wx.previewImage({ //當前顯示圖片 current: imgs[index], //所有圖片 urls: imgs }) } } })
index文件夾的index.json和index.wxml和index.js
{ "navigationBarTitleText": "圖片上傳", "usingComponents": { "pop": "../common/chooseImage/index", "popnum": "../common/chooseImage/index" } }
<view class="perfect-title">圖片上傳公用組件</view> <view class="pop-box"> <view class="upload-title">營業執照原件(1張)</view> <view style="margin:30rpx;"> <pop id="pop" bind:chooseImg="chooseImg" bind:deleteImg="deleteImg" bind:previewImg="previewImg" count="{{count}}"></pop> </view> </view> <view class="pop-box"> <view class="upload-title">身份證原件正反面(2張)</view> <view style="margin:30rpx;"> <popnum id="popnum" bind:chooseImg="chooseImgnum" bind:deleteImg="deleteImgnum" bind:previewImg="previewImg" count="{{countnum}}"></popnum> </view> </view> <view class="btn-area" id="buttonContainer2"> <button type="primary" bindtap="submitBtn">確認</button> </view>
Page({ /** * 頁面的初始數據 */ data: { imgs:[], imgsnum: [], count:1, countnum:2 }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { //獲得pop組件 this.pop = this.selectComponent("#pop"); this.popnum = this.selectComponent("#popnum"); }, chooseImg: function (e) { // console.log(this.pop.data.imgs); this.setData({ imgs: this.pop.data.imgs }) }, deleteImg: function (e) { // console.log(this.pop.data.imgs); this.setData({ imgs: this.pop.data.imgs }) }, chooseImgnum: function (e) { // console.log(this.pop.data.imgs); this.setData({ imgsnum: this.popnum.data.imgs }) }, deleteImgnum: function (e) { // console.log(this.pop.data.imgs); this.setData({ imgsnum: this.popnum.data.imgs }) }, submitBtn: function(){ console.log(this.data.imgs); console.log(this.data.imgsnum); }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { } })
微信小程序(15)--上傳圖片公用組件(2)