iview组件库，Upload组件上传文件数限制+手动上传

最近在使用Upload组件时遇到个问题，官方文档中竟然没有对于文件数量的处理，这让我需要校验上传数量时，无从下手。于是通过，手动上传+模拟防抖的处理，婉转实现对数量的校验。

参考代码如下：

// template Upload部分代码
<Upload
  ref="upload"
  :before-upload="handleUpload"
  :on-success="handleSuccess"
  multiple
  action="接口地址">
    <div class="btn">添加上传</div>
</Upload>

// script
<script>
export default {
  data() {
    return {
      timer: null, // setTimeout 计时器
      uploadList:[], // 获取上传列表
    };
  },
  methods: {
    // 重置
    clear() {
      this.timer = null;
      this.breakpointUploadList = [];
    },
    // 通过防抖，使用手动上传代替自动上传效果
    debounceUpload() {
      if (this.timer !== null) {
        clearTimeout(this.timer); // 清除计时器
      }
      this.timer = setTimeout(() => {
        if(this.uploadList?.length > 10) {
          this.$Message.error("上传文件数量不能大于10");
          this.clear();
          return false;
        }
        this.uploadList.forEach((item) => {
          this.$refs[uploadType].post(item); // 触发被中止的上传
        });
        this.clear();
      }, 1000);
    },
    handleUpload(file) {
      this.uploadList.push(file); // 收集文件数量
      this.debounceUpload();
      return false; // 阻止自动上传
    },
    handleSuccess (res, file) {
      // 手动执行上传后，已经可以触发Upload的钩子函数
      console.log("上传成功")
    },
  },
};
</script>

官方文档参考：http://v1.iviewui.com/components/upload#DX

结语

后续会更新Upload组件，上传时实时状态更新的逻辑处理，也是官方文档中未描述清楚的内容。