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 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
原生js+ajax分页组件
Jan 30 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
php 常用字符串函数总结
2008/03/15 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php实现encode64编码类实例
2015/03/24 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
Python3列表List入门知识附实例
2020/02/09 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
关于人生的感言
2014/01/17 职场文书
高中军训感想800字
2014/02/23 职场文书
探亲假请假条
2014/04/11 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
自主招生专家推荐信
2015/03/26 职场文书
计划生育责任书
2015/05/09 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
小学语文教学随笔
2015/08/14 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python