el-upload实现上传文件预览
el-upload实现上传文件预览
·
Element官网有el-upload文件上传的组件,但是并没有文件预览的相关功能,但是有时需求需要满足上传文件后进行预览的功能,那么如何实现对el-upload上传的文件进行预览呢?
el-upload组件应用
<el-upload
class="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 = fileList
let reader = new FileReader()
reader.readAsText(files.raw)
reader.onload = e => {
this.testForm.fileContent = e.target.result.replace(
/\n|\r\n/g,
'<br/>'
)
}
},
Dialog预览文件
<el-button
type="primary"
@click="isShow = true"
>文件预览</el-button
>
<el-dialog
title="文件预览"
:visible="isShow"
@close="isShow = false"
width="40%"
append-to-body
>
<div v-html="testForm.fileContent"></div>
</el-dialog>
更多推荐
已为社区贡献5条内容
所有评论(0)