小程序运营教程_vue完成图片上传预览功用

vue实现图片上传预览功能       这篇文章主要为大家详细介绍了vue实现图片上传预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现图片上传预览的具体代码，供大家参考，具体内容如下

效果图

html结构

 !--点击上传按钮-- 
 li v-if="!(!item.isNew editBtnType[index])" @click="houseUpload(index)" 
 div 
 span /span 
 h5 点击上传 /h5 
 /div 
 /li 
 !--展示区域-- 
 viewer :images="item.imgUrl" 
 li v-for="(picItem, picIndex) in item.imgUrl" :key="picIndex" 
 img :src="picItem" alt="" :key="picItem" width="120" height="90" :ref="'showImg_'+index" 
 div 
 div 
 span @click="clickWatchImg('showImg_'+index,picIndex)" 
 i /i 
 /span 
 span v-if="!(!item.isNew editBtnType[index])" @click="delHouseImage(index,picIndex)" 
 i /i 
 i /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;
}

formData.append('watermark', false) // pressed 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学习教程请阅读专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。