vue 이미지 업로드 미리 보기 기능 구현
효과 도
html 구조
<ul class="gallery-window-map" style="flex-wrap:wrap;">
<!-- -->
<li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @click="houseUpload(index)">
<div class="pic-box">
<span class="iconfont icon-zengjia"></span>
<h5 class="btn-tit"> </h5>
</div>
</li>
<!-- -->
<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 box
*/
houseUpload(index) {
this.$refs.houseTypeLoad[index].click()
},
/**
*
* @index 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()
},
/**
* ,
* @index box
* @picIndex
*/
delHouseImage(index, picIndex) {
this.houseTypeForm[index].imgUrl.splice(picIndex, 1)
},
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.