Element el-upload 自定义上传单个指定格式文件

后台玩前端，第一次使用VUE+Element。
对于文件上传这一块折腾了好久才搞定，记个笔记。同时帮助需要的人。

VUE代码如下：

<el-upload
   class="upload-demo"
   ref="upload-demo"
   action="http://localhost"
   accept=".xlsx,.xls"
   :limit="2"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :on-exceed="handleExceed"
   :on-change="handleChange"
   :file-list="fileList"
   :before-upload="beforeUpload"
   :before-remove="beforeRemove"
   :http-request="doUpload"
   :on-success="handleSuccess"
   :on-error="handleError"
   :auto-upload="false">
 	<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 	<el-button size="small" type="success" @click="submitUpload">上传</el-button>
 	<div slot="tip" class="el-upload__tip">请选择 Execl 文件，然后点击上传。</div>
 </el-upload>

关键点：

1. 由于自定义了上传方法，因此 action 随便填写一个。原因参见第5点。
2. accept 指定了可选的文件类型，让OS帮你过滤掉不可选的文件。也可以不指定，推迟到before-upload()事件里自己做文件的限定检查。目录下文件比较多的情况下，推荐指定。
3. limit 限定选择的文件个数，由于这里只允许一个上传一个文件，并支持更新所以设定2个。大于2也可以。
4. file-list 用于存储选择的文件列表。通过变更可以实现列表的动态变化。这里通过覆盖写实现选择文件的更新。
5. http-request 这个属性是这里的关键设置，它指定了自定义的上传方法。如果没有设定，那么控件会使用 action 触发上传。
6. on-success, on-error 实现自定义的上传成功和失败的回调。

脚本如下：

<script>
export default {
  data () {
    return {
      fileList: [], //上传的文件列表
    }
  },
  methods: {
    // 删除选择的文件时触发
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件时触发
    handlePreview (file) {
      console.log(file)
    },
    // 当选择文件个数超过指定 limit 时触发；这里只上传一个文件，指定了 limit="2"，也可以不指定limit，则无限制
    handleExceed (files, fileList) {
      this.$message.warning(`已选择了 ${files.length} 个文件，如需更新请先删除已选择文件`)
      console.log(files)
    },
    //当重新选择文件时，替换已选择的文件，从而实现变更要上传的文件，保证上传列表中只有一个文件；limit要大于2，否则只会触发onExceed，而不执行onChange
    handleChange(files, fileList) {
      this.fileList = [files]
    },
    //上传成功的自定义callback
    handleSuccess (response, file, fileList) {
      //清空文件列表
      this.$refs.uploadClass.clearFiles()
      this.$message({
        showClose: true,
        message: '上传成功',
        type: 'success'
      })
    },
    //上传失败的自定义callback
    handleError (err, file, fileList) {
      this.$message({
        showClose: true,
        message: file.name + ' 上传失败,' + JSON.stringify(err),
        type: 'error'
      })
    },
    //点击删除文件时触发删除确认提醒
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    //上传前的触发，可以在这里对文件大小，类型等检测
    beforeUpload (file) {
      if (file.size > 1024 * 1024) {
        this.$message.warning('上传的文件大于1Mb，请静心等待！')
      }
    },
    //自定义上传接口
    doUpload (param) {
      //上传到腾讯云cos,
      cos.putObject({
        Bucket: "",
        Region: ""
        Key: param.file.name,
        StorageClass: 'STANDARD',
        Body: param.file,
        onProgress: function (progressData) {
          //显示上传进度，采用百分制。
          param.file.percent = progressData.percent * 100
          //进度条
          param.onProgress(param.file)
        }
      }, function (err, data) {
        if (data && data.statusCode === 200) {
          //callback我们自定义的handleSuccess
          param.onSuccess(data)
        } else {
          //callback 我们自定义的handleError
          param.onError(data)
        }
      })
      //自己的post请求可以使用axios
      /*this.axios({
        method: 'post',
        url: '服务地址',
        data: param.file,
      }).then(res => {
        if (res.status === 200) {
        }
      }).catch(err => {
      	console.log(err)
      })*/
    },
    //上传
    submitUpload () {
      this.$refs.uploadDemo.submit()
    },
}
</script>

重点说明

1. 进度条的显示一定要设定 param.file.percent 并执行 param.onProgress(param.file) 否则，进度条不显示进度。
2. 进度条的百分比使用的百分制。百分比可以使用file的参数计算得出。

摸石头过河，总算跑起来了！
更多细节参看官方文档 Element upload