線上服務(wù)咨詢
Article/文章
記錄成長點(diǎn)滴 分享您我感悟
小程序如何實(shí)現(xiàn)多圖上傳、圖片預(yù)覽效果？（代碼示例）
本篇文章給大家?guī)淼膬?nèi)容是介紹小程序如何實(shí)現(xiàn)多圖上傳、圖片預(yù)覽效果？（代碼示例） 。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你們有所幫助。
wxml代碼：
<view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">點(diǎn)擊可預(yù)覽選好的圖片</view> <view class="weui-uploader__info">{{pics.length}}/9</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files"> <block wx:for="{{pics}}" wx:for-item="image"> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="{{image}}" src="{{image}}" bindtap="previewImage"></image> </view> </block> </view><view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view> <!-- isShow 這個(gè)是判斷是否進(jìn)行觸發(fā)點(diǎn)隱藏操作 --> <view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view></view>wxss代碼：
page { line-height: 1.6; font-family: -apple-system-font, "Helvetica Neue", sans-serif;}icon { vertical-align: middle;}.weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;}.weui-cell_input { padding-top: 0; padding-bottom: 0;}.weui-uploader__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding-bottom: 10px; align-items: center;}.weui-uploader__title { flex: 1;}.weui-uploader__info { color: #b2b2b2;}.weui-uploader__bd { margin-bottom: -4px; margin-right: -9px; overflow: hidden;}.weui-uploader__file { float: left; margin-right: 9px; margin-bottom: 9px;}.weui-uploader__img { display: block; width: 79px; height: 79px;}.weui-uploader__input-box { float: left; position: relative; margin-right: 9px; margin-bottom: 9px; width: 77px; height: 77px; border: 1px solid #d9d9d9;}.weui-uploader__input-box:before, .weui-uploader__input-box:after { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #d9d9d9;}.weui-uploader__input-box:before { width: 2px; height: 39.5px;}.weui-uploader__input-box:after { width: 39.5px; height: 2px;}.weui-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}.hideTrue { disp軟件開發(fā)
lay: none}js代碼：
var app = getApp();Page({ data: { pics: [], count: [1, 2, 3, 4, 5, 6, 7, 8, 9], isShow: true }, onLoad: function (options) { // 生命周期函數(shù)--監(jiān)聽頁面加載 isShow: (options.isShow == "true" ? true : false) }, // 圖片上傳 chooseImage: function () { var _this = this, pics = this.data.pics; wx.chooseImage({ count: 9 - pics.length, // 最多可以選擇的圖片張數(shù)，默認(rèn)9 sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有 sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機(jī)，默認(rèn)二者都有 success: function (res) { // success var imgSrc = res.tempFilePaths; //圖片路徑 pics = pics.concat(imgSrc); //選取的圖片的地址數(shù)組 // 控制觸發(fā)添加圖片的最多時(shí)隱藏 if (pics.length >= 9) { _this.setData({ isShow: (!_this.data.isShow) }) } else { _this.setData({ isShow: (_this.data.isShow) }) } _this.setData({ pics: pics }) }, fail: function () { // fail }, complete: function () { // complete } }) }, // 圖片預(yù)覽 previewImage: function (e) { var current = e.target.dataset.src wx.previewImage({ current: current, urls: this.data.pics }) } // 刪除圖片 deleteImg: function (e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); },uploadimg:function(){//這里觸發(fā)圖片上傳的方法 var pics=this.data.pics; app.uploadimg({ url:'https://........',//這里是你圖片上傳的接口 path:pics//這里是選取的圖片的地址數(shù)組 }); },})
小程序,多圖上傳,圖片預(yù)覽
