這篇文章主要介紹使用vue實現(xiàn)圖片上傳預(yù)覽功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
陽東網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),陽東網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為陽東近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請找那個售后服務(wù)好的陽東做網(wǎng)站的公司定做!
效果圖
html結(jié)構(gòu)
<ul class="gallery-window-map" > <!--點擊上傳按鈕--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @click="houseUpload(index)"> <div class="pic-box"> <span class="iconfont icon-zengjia"></span> <h6 class="btn-tit">點擊上傳</h6> </div> </li> <!--展示區(qū)域--> <viewer :images="item.imgUrl"> <li class="house-pic-item" v-for="(picItem, picIndex) in item.imgUrl" :key="picIndex"> <img :src="picItem" alt="" :key="picItem" width="120" height="90" :ref="'showImg_'+index"> <div class="mask"> <div class="ico-box"> <span class="font-btn" @click="clickWatchImg('showImg_'+index,picIndex)"> <i class="iconfont icon-fangda"></i> </span> <span class="font-btn" v-if="!(!item.isNew&&editBtnType[index])" @click="delHouseImage(index,picIndex)"> <i class="iconfont icon-shanchu"></i> <i class="line"></i> </span> </div> </div> </li> </viewer> </ul>
css樣式
.gallery-window-map{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; } .house-pic-item { position: relative; display: inline-block; margin-right: 13px; width: 120px; height: 90px; background-color: #e3e3e3; } .pic-box { width: 100%; text-align: center; } .icon-zengjia { position: relative; top: 12px; font-size: 26px; color: #b2b2b2; } .btn-tit { height: 38px; line-height: 38px; font-size: 12px; color: #999; } .mask { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(34, 34, 34, 0.6); } .font-btn { display: inline-block; height: 40px; width: 50%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .font-btn:last-child { position: relative; } .icon-fangda, .icon-shanchu { font-size: 22px; color: #fff; } .line { content: ''; display: inline-block; position: absolute; left: 0; top: 10px; width: 1px; height: 20px; background: #fff; }
/** * 模擬點擊上傳圖片按鈕 * @index 當(dāng)前操作的戶型box的索引 */ houseUpload(index) { this.$refs.houseTypeLoad[index].click() }, /** * 上傳圖片到服務(wù)器 * @index 當(dāng)前操作的戶型box的索引 */ upLoadHouse(e, index) { let _that = this const file = e.target.files[0] if (!file) { return } new ImageCompressor(file, { quality: 0.9, maxWidth: 2000, maxHeight: 2000, success(result) { // debugger const formData = new FormData() formData.append('file', result, result.name) formData.append('watermark', false) // Send the compressed image file to server with XMLHttpRequest. if (result.size > 1 * 1024 * 1024 || result.size < 3 * 1024) { _that.$message('圖片大小要在3K~1M之間') return } else { _that.$ajax.post('/img/upload', formData).then(res => { res = res.data if (res.images && res.images.length > 0) { if (res.images[0].src !== 'file size is too small') { let item = res.images[0].src console.log(item) _that.houseTypeForm[index].imgUrl.unshift(item) } } }) } }, error(e) { console.log(e.message) } }) }, /** * 打開圖片查看器 */ clickWatchImg(str, picIndex) { console.log('=================') console.log(picIndex) console.log(this.$refs[str][picIndex]) this.$refs[str][picIndex].click() }, /** * 刪除指定圖片,操作表單數(shù)據(jù) * @index 當(dāng)前操作的戶型box的索引 * @picIndex 當(dāng)前操作的圖片索引 */ delHouseImage(index, picIndex) { this.houseTypeForm[index].imgUrl.splice(picIndex, 1) },
以上是“使用vue實現(xiàn)圖片上傳預(yù)覽功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標題:使用vue實現(xiàn)圖片上傳預(yù)覽功能
文章出自:http://muchs.cn/article28/picccp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站策劃、企業(yè)建站、手機網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)