当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue实现图片上传预览功能

vue实现图片上传预览功能

2020年03月09日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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组件学习教程进行学习。

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网