el-upload实现上传文件预览

Element官网有el-upload文件上传的组件，但是并没有文件预览的相关功能，但是有时需求需要满足上传文件后进行预览的功能，那么如何实现对el-upload上传的文件进行预览呢？

el-upload组件应用

      <el-uploadclass="upload-demo"ref="uploadFile":auto-upload="false":action="testForm.actionUrl"drag:file-list="testForm.fileList":on-change="handleFileChange":on-remove="removeFile":limit="1":on-exceed="overLimitCount">

JS函数处理

    handleFileChange(files, fileList) {this.testForm.fileList = fileListlet reader = new FileReader()reader.readAsText(files.raw)reader.onload = e => {this.testForm.fileContent = e.target.result.replace(/\n|\r\n/g,'<br/>')}},

Dialog预览文件

      <el-buttontype="primary"@click="isShow = true">文件预览</el-button><el-dialogtitle="文件预览":visible="isShow"@close="isShow = false"width="40%"append-to-body><div v-html="testForm.fileContent"></div></el-dialog>

el-upload实现上传文件预览相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
uploadify java 下载_uploadify java实现多文件上传和预览
本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html #uploader { position: relative; ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
minio实现大文件分片上传+断点续传+预览
minio实现大文件分片上传+断点续传+预览只提供后端java代码思路: 前端分片校验文件md5是否已经存在 --不存在创建临时桶存分片校验分块是否已经上传分块上传合并分块校验合成后md ...
php案例文件上传并预览
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言代码 cyg.php 2.php 效果:也就是上传的文件里面的内容前言 php案例文件上传 ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...

el-upload实现上传文件预览

el-upload组件应用

JS函数处理

Dialog预览文件

el-upload实现上传文件预览相关推荐

最新文章

热门文章