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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐