el-upload上传组件在vue中的应用和踩坑

需求：打开弹窗，点击按钮选择上传一个Excel文件，只能上传.xlsx格式文件，且不超过20M。

 首先大致画出了界面，因为不需要显示已上传文件列表，所以就el-upload这个组件来说，省了不少麻烦事。dom部分直接上代码：

<el-dialog title="导入" :visible.sync="uploadView" @close="uploadView = false">
  <div class="dialog-wrap">

    <!-- 上传 -->
    <el-upload
      ref="upload"
      accept=".xlsx"
      :limit="1"
      :action="actionUrl"
      :data="{'empCode':empCode}"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="upSuccess"
      :on-error="upError"
      :on-progress="upProgress"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传.xlsx格式文件，且不超过20M</div>
    </el-upload>

    <!-- 下载 -->
    <el-button ref="exportBtn" size="small" type="primary" @click="downloadBtn">
        下载模板
    </el-button>
  </div>
  <template slot="footer">
    <el-button @click="uploadView = false">关闭</el-button>
  </template>
</el-dialog>

 大致分析一下属性：

ref="upload" 后面给清除上传历史记录提供定位（此处可见后面的踩坑一）；

accept=".xlsx" 和 :limit="1" 自然是用来控制一次只能上传一个文件且格式只能是.xlsx；

:action="actionUrl" 是上传的路径（或者说是后台接受上传文件的接口），此处用在vue定义的data中属性actionUrl更灵活，方便我取当前域和端口再拼上后台给的接口名；

:data="{'empCode':empCode}" 是后台接口约定的需要传的额外参数，以Object形式传参；

:show-file-list="false" 隐藏掉文件上传列表； 

:before-upload="beforeUpload"， :on-success="upSuccess"， :on-error="upError"， :on-progress="upProgress"，简单的说，就是在不同时间点触发的四个事件，具体解释可以看下官方的API：

 接下来看下四个事件的分工：

before-upload 上传前触发：限制文件的格式和大小

on-success 上传成功后触发：成功事件+提示信息

on-error 上传失败后触发：提示信息

on-progress 上传过程中、上传成功或失败前触发：这里我用到它主要是想加一个loading效果

// 上传前校验文件格式（Excel）和文件大小（限制20M）
beforeUpload(file) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
  const whiteList = ['xlsx']
  if (whiteList.indexOf(fileSuffix) === -1) {
    this.$message({ message: '只能上传.xlsx格式文件', type: 'warning' })
    return false
  }
  const isLt2M = file.size / 1024 / 1024 > 20
  if (isLt2M) {
    this.$message({ message: '上传文件大小不能超过 20MB', type: 'warning' })
    return false
  }
},
// 上传成功
upSuccess(response) {
  this.upCount = 0 // 控制过程事件的次数，每次成功都将计数清零
  this.$loading(false) // 关闭遮幕loading效果
  this.$refs.upload.clearFiles() // 上传成功之后清除历史记录

  if (response.success) {
    ...
  } else {
    ...
  }
},
// 上传失败
upError(e) {
  this.upCount = 0 // 控制过程事件的次数，每次失败都将计数清零
  this.$refs.upload.clearFiles() // 上传成功之后清除历史记录
  this.$loading(false) // 关闭遮幕loading效果
  this.$notify({ title: '失败', message: '导入失败', type: 'error', duration: 3000 }) // 提示失败
},
// 上传过程
upProgress(e) {
  this.upCount++ // 过程调用计数
  if (this.upCount === 1) { // 保证上传过程中只会打开一个遮幕
    this.$loading(true) // 显示遮幕loading效果
  }
},

 踩坑一：上传成功或失败后，再点击上传按钮没反应？

        原因是没有清空上传的历史记录，故需要加一句 this.$refs.upload.clearFiles() 清空已上传的文件列表（该方法不支持在 before-upload 中调用）

踩坑二：弹窗里有上传和下载两个功能，一开始俩el-button都是写在el-upload里的，点击下载的时候，也会弹出文件选择框。

        原因el-upload标签中只设计上传相关，故需要将下载按钮放到同el-upload外面

踩坑三：on-progress偶发性多次触发？

        我调试了很多遍，原因还不清楚，在上传数据量较大的WPS表格文件时会偶发性地出现过程事件被调用了多次，同一个文件有时正常有时要跑两次，有时甚至双击选择文件和单机选中文件再点确定 也会影响过程事件的调用次数，这样就会出现先执行一次beforeUpload，然后upProgress执行两次，最后执行了一次upSuccess，很奇怪。。。因为我的过程事件是用来显示loading遮幕的，如果on-progress多次执行，页面上就会重叠多个遮幕，所以被逼无奈我只好采用计数的方法，只允许在第一次执行过程函数的时候打开一个loading，然后再在成功或失败后关闭它。