前端工作小结72-实现预览效果

简介: 前端工作小结72-实现预览效果

1子组件

成功

   

ChangeRest(event, file){
        /*   console.log(event)
           console.log(file)*/
          /* console.log(URL.createObjectURL(file.raw))*/
           this.imageUrl = URL.createObjectURL(file.raw);
          /* this.imageUrl=event.tmp_url
           console.log(this.imageUrl)*/
           console.log(1)
           this.eventSave=event
           console.log(this.eventSave)
           this.$emit("ChangeLest",this.eventSave)
         },

2父组件

 

changeRest1(val){
           console.log(2)
           console.log(val)
           this.preview=val.tmp_url
           console.log(this.preview)
           this.form.thumbnail=val.relativepath+val.name
         }

3预览效果

通过两个不同的值实现预览 下面做个预览 库里面加个字段即可

image.png

相关文章
|
6月前
|
前端开发
简单的做一个图片上传预览(web前端)
简单的做一个图片上传预览(web前端)
57 0
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
存储 JSON 前端开发
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
1141 0
|
4月前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
110 0
|
6月前
|
Web App开发 前端开发 安全
如何用JAVA如何实现Word、Excel、PPT在线前端预览编辑?
随着信息化的发展,在线办公也日益成为了企业办公和个人学习不可或缺的一部分,作为微软Office的三大组成部分:Word、Excel和PPT也广泛应用于各种在线办公场景,但是由于浏览器限制及微软Office的不开源等特性,导致Word、Excel和PPT在在线办公很难整合到自己公司的OA或者文档系统。
557 7
|
6月前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
68 0
|
前端开发 JavaScript
前端实现文件预览(pdf、excel、word、图片)
前端实现文件预览(pdf、excel、word、图片)
358 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
343 1
|
JavaScript 前端开发 IDE
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发