vue实现图片上传预览功能


Posted in Javascript onDecember 23, 2019

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

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

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

Javascript 相关文章推荐
jQuery操作input type=radio的实现代码
Jun 14 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS与C#编码解码
Dec 03 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
vue项目实现图片上传功能
Dec 23 #Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 #Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
微信小程序实现签字功能
Dec 23 #Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
vue实现拖拽效果
Dec 23 #Javascript
You might like
php创建session的方法实例详解
2015/01/27 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
python实现ip查询示例
2014/03/26 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python----数据预处理代码实例
2019/03/20 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python json格式化打印实现过程解析
2020/07/21 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
关于是否需要写商业计划书
2014/02/07 职场文书
质量安全标语
2014/06/07 职场文书
大专学生求职自荐信
2014/07/06 职场文书
天猫活动策划方案
2014/08/21 职场文书
党性教育心得体会
2014/09/03 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS