vue实现图片上传预览功能

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

效果图

html结构

 
 

  
   
   
点击上传
  
 
 
 
  

   
   
    
     
      
     
     
      
      
     
    
   
  
 

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;
}

houseUpload(index) {
 this.$refs.houseTypeLoad[index].click()
},

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()
},
 
delHouseImage(index, picIndex) {
 this.houseTypeForm[index].imgUrl.splice(picIndex, 1)
},

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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