使用 Element 上传组件读取文件

需求：支持 .txt 和 .sql 后缀文件内容的读取，最大 2MB。显示已读取文件名称、读取进度和读取成功状态。读取按钮重复点击时，已读取文件列表中的文件被新的文件替换。

<template>
  <el-upload
    ref="upload-sql"
    action=''
    accept=".txt,.sql"
    :auto-upload="false"
    :on-change="changeFile"
    :http-request="uploadHandler">
      <el-button class="mr-2" plain slot="trigger" size="small">
        <i class="el-icon-upload mr-1 font-size-14"></i>读取文件
    </el-button>支持 .txt 和 .sql 后缀文件上传，最大2MB
  </el-upload>
</template>

<script>
  export default {
    data () {
      return {
        sqlText: ''
      }
    },
    methods: {
      getRandomNum (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      },
      changeFile (file, fileList) {
        if (file.status === 'ready') {
          // 已上传文件列表如果存在 2 条记录，移除第一条，实现替换效果
          if (fileList.length === 2) {
            fileList.shift()
          }
          
          // 手动开始上传
          this.$refs['upload-sql'].submit()
        }
      },
      uploadHandler (params) {
        const isLt2M = params.file.size / 1024 / 1024 <= 2
        if (!isLt2M) {
          this.$notify({
            message: '上传的文件不能大于2MB',
            type: 'warning',
            title: '警告'
          })
          return
        }
        
        // 调用 element ui 进度条
        params.onProgress({ percent: this.getRandomNum(19, 99) })
        setTimeout(() => {
          this.readText(params)
        }, 100)
      },
      async readText (params) {
        // UTF-8,GBK,GB2312
        const readFile = new FileReader()
        readFile.onload = (e) => {
          this.sqlText = e.target.result
          
          params.onProgress({ percent: 100 }) // 调用 element ui 进度条
          params.onSuccess() // 调用 element ui 上传成功方法
        }
        readFile.readAsText(params.file)
      },
    }
  }
</script>

<style scoped lang="scss">
  
  // 去掉已上传文件列表的文件移除动画
  /deep/ .el-list-leave-active {
    transition: none;
  }
  /deep/ .el-list-leave-active {
    opacity: 0;
  }
  /deep/ .el-upload-list {
    max-height: 26px;
  }
</style>

效果：