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的25个步骤 千倍级效率提升
Feb 11 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP中调用JAVA
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php文件系统处理方法小结
2016/05/23 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Python实现冒泡排序的简单应用示例
2017/12/11 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
三年大学生活自我鉴定
2014/01/21 职场文书
技能比赛获奖感言
2014/02/14 职场文书
销售个人求职信范文
2014/04/28 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
天下第一关导游词
2015/02/06 职场文书
预备党员入党感言
2015/08/01 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS