欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现图片上传预览功能

程序员文章站 2022-06-25 13:01:01
本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下...

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

效果图

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组件学习教程进行学习。

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