您好,登錄后才能下訂單哦!
這篇文章主要介紹使用vue實(shí)現(xiàn)圖片上傳預(yù)覽功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
效果圖
html結(jié)構(gòu)
<ul class="gallery-window-map" > <!--點(diǎn)擊上傳按鈕--> <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">點(diǎn)擊上傳</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; }
/** * 模擬點(diǎn)擊上傳圖片按鈕 * @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實(shí)現(xiàn)圖片上傳預(yù)覽功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。