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)
},