2019-12-17 elementUI 多文件上传报错研究，造成上传文件重复

今天附上element-UI 的上传文件的坑，刚开始接触vue 我 的写法都是抽象方式，表格循环，列表显示字段循环，数据结构循环，数据重组也是循环

单元行 编辑  单元格编辑等等  验证 都是我循环写，利用ES6 的扩展方式和JS 底层的 指针方式，并不需要和网上大多程序员一样，需要验证的时候 对硬多层数据数组中的 属性名相互  对应结构，只需要对应映射指针堆的地址即可！网上的 编辑单元格我一致接的写的很low!,本次在执行上传组件的时候，因为初学的小白，
并不知道elm 组件的用法 ，上班的时候话了一上午  改这个BUG！【因为这个项目是标准6个月完成的复杂交互项目我们用2个月完成，包括 白盒 黑盒测试 ，今天正在uap】,代码  暂时不敢瞎优化，先拖着解决问题先！

如果用传统方式写按钮的显示逻辑，我觉得我的按钮逻辑至少有大几百行，我这里只用了不到1百行！抽象函数和高级高价函数的嵌套使用方式，我觉得第二个项目做完之后，这种抽象代码风格 ，非常适合 复杂业务，接口数50--200个以上的，目前我的接口数137个。

多个文件上传 的时候报错因为没有缺失正确回调文件的参数。且没有阻止文件执行验证 上传，而造成上传文件重复，第二 个文件缺少返回参数，这就是报错文件的映射对象

视图层

注意：

1：disabled 用来禁止重复点击，一个父 对象控制，一个子对象控制，单独控制【选取文件】只是禁用了按钮，没有显示出上传组件 的禁用 状态效果。
2： 巧妙的结合 elementUI的表单验证响应，绑定之必须是 prop属性对象。

prop传值层

初始化层

3：必须有初始化赋值，【watch 在初始化组件的时候 是不会触发响应的】

函数层

4：这里坑就多了==》
    4.1，onchange中的file.raw 等于其他函数中的file
    4.2,   多选时候，fileList 是组件虚拟化的数组，一定存在，你不给他也有默认数组。所以在多文件上传的时候，不论文件是否 合格，都按照上传文件的个数执行
              doUpload 这个函数，于是要阻止他调用这个方法，就必须在方法里截止调用，
             1 先在onchange 中 判断文件中是否含有不合格文件，存在 则关闭执行上传接口。【onchange】这里要注意的是，

               2   beforUpload 和doupload 是并连 响应的 ， 前者中的file验证合格，执行后面的函数，所以前者要有返回false 才能阻止后者执行，而onchange 不论是执行多文件，还是单文件，都是一次一次的触发，所有这里控制文件 获取对象，在用beforeUpload,验证，则执行上传接口中的this.file文件所以如果改为：

上图为报错机制，接口调用，此时错误的文件this.file 是假对象

上传接口正确方式

可以改造下：  

第二种 这里返货false 就 能阻止onchange里监听的  不合格 文件 是否执行 上传 指令 调用下一个方式