El upload realizes the preview of uploaded files

Element Official website el-upload File upload component , But there is no relevant function of file preview , However, sometimes the requirements need to meet the function of previewing after uploading files , So how to realize the right el-upload Preview the uploaded file ？

el-upload Component application

      <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 Function processing

    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 Preview file

      <el-button type="primary" @click="isShow = true" > File preview </el-button >
      <el-dialog title=" File preview " :visible="isShow" @close="isShow = false" width="40%" append-to-body >
        <div v-html="testForm.fileContent"></div>
      </el-dialog>