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 相关文章推荐
关于JS中的闭包浅谈
Aug 23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
js实现显示手机号码效果
Mar 09 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
JS实现旋转木马轮播图
Jan 01 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获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
使用JS获取页面上的所有标签
2018/10/18 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
对Python中的@classmethod用法详解
2018/04/21 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
四风存在的原因分析
2014/02/11 职场文书
高中家长寄语
2014/04/02 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android