elupload实现上传文件预览

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

el-upload组件应用

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


JS函数处理

handleFileChange(files, fileList) {this.testForm.fileList &＃61; fileListlet reader &＃61; new FileReader()reader.readAsText(files.raw)reader.onload &＃61; e &＃61;> {this.testForm.fileContent &＃61; e.target.result.replace(/\n|\r\n/g,&＃39;
&＃39;)}},


Dialog预览文件

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