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>