微信小程式圖片上傳(開發例項)
阿新 • • 發佈:2019-01-09
html部分
<!-- 圖片上傳 --> <view class='uploadimg'> <view class='uploadimgBox'> <block wx:for="{{imgs}}" wx:if="{{imgs.length>0}}"> <image class='addpic' data-index='{{index}}' src="{{item}}"></image> </block> <view class='addImg' wx:if="{{canChoose}}" bindtap='chooseImageTap'> <image src='../../images/add.png'></image> </view> <view class='addImg'wx:else bindtap='noChoose'> <image src='../../images/add.png'></image> </view> <view class='addImgMsg'wx:if="{{imgs.length<=0}}"> <text>上傳圖片(症狀部位、檢查報告或其他資料)</text> <text>僅您和醫生登入後可見</text> </view> </view> </view>
js部分
Page({ /** * 頁面的初始資料 */ data: { imgs: [],//本地圖片地址陣列 message: '', submitTime: 1, tempFilePaths: {},//本地圖片地址物件 canChoose: true,//是否可選圖片 imgString: '',//圖片拼接後的字串 }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, //刪除上傳圖片 reom(e){ let that = this let index = e.currentTarget.dataset.index let imgs = that.data.imgs for (var i = 0; i < imgs.length;i++){ if (index == i){ imgs.splice(i, 1); i--; } } that.setData({ imgs: imgs, }); }, //新增上傳圖片 chooseImageTap: function () { var that = this; wx.showActionSheet({ itemList: ['從相簿中選擇', '拍照'], itemColor: "#00000", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) { that.chooseWxImage('album') } else if (res.tapIndex == 1) { that.chooseWxImage('camera') } } } }) }, noChoose: function () { var that = this; that.alert("最多隻能上傳6張哦~") }, // 選取圖片 chooseWxImage: function (type) { var that = this; var imgsPaths = that.data.imgs; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) { console.log(res); var imgsLimit = []; var tempFilePaths = that.data.tempFilePaths; var imgs = that.data.imgs; console.log(res.tempFilePaths); for (var i = 0; i < res.tempFilePaths.length; i++) { tempFilePaths[res.tempFilePaths[i]] = ''; console.log(res.tempFilePaths[i]) imgs.push(res.tempFilePaths[i]); }; if (imgs.length > 6) { for (var i = 0; i < 6; i++) { imgsLimit.push(imgs[i]); } that.setData({ imgs: imgsLimit, tempFilePaths: tempFilePaths, }); } else { that.setData({ imgs: imgs, tempFilePaths: tempFilePaths, }); } if (imgsPaths.length >= 6) { that.setData({ canChoose: false, }); } else { that.setData({ canChoose: true, }); }; }, }) }, })