vue實(shí)現(xiàn)圖片上傳預(yù)覽功能

第vue實(shí)現(xiàn)圖片上傳預(yù)覽功能

本文實(shí)例為大家分享了vue實(shí)現(xiàn)圖片上傳預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

html結(jié)構(gòu)

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:020px;

-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

constfile=e.target.files[0]

if(!file){

return

newImageCompressor(file,{

quality:0.9,

maxWidth:2000,

maxHeight:2000,

success(result){

//debugger

constformData=newFormData()

formData.append(file,result,)

formData.append(watermark,false)

//SendthecompressedimagefiletoserverwithXMLHttpRequest.

if(result.size1*1024*1024||result.size3*1024){

_that.$message(圖片大小要在3K~1M之間)

return

}else{

_that.$ajax.post(/img/upload,formData).then(res={

res=res.data

if(res.imagesres.images.length0){

if(res.images[0].src!==filesizeistoosmall){

letitem=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)前操