Ant Design Vue - upload公共组件将封装

因为 elment-ui 好像没有维护了，就采用了 Ant Design Vue 组件库。

因为项目里面好多地方使用了 Upload(a-upload) 上传组件，所以就进行二次封装(比如上传路径等等)！
并且交付 Form(a-form) 组件进行托管

老实说交付 Form(a-form) 自动接管这里的坑真大, 百度了好久没有解决方案(都没有进行二次封装)

先看 Form(a-form) 组件的一段描述

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form(a-form) 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

这里坑就坑在 onChange 的这段描述，因为之前一直在写React也是使用 Ant Design 进行二次组件封装时候写的 this.props.onChange(xxx), 所以Vue这边上传成功后发送事件我就写成了 this.$emit("onChange", info.file.response.data) 导致 Form(a-form) 一直接管不到！

也看了 Vue 官网的自定义组件：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

所以我又改成了这样: this.$emit("input", info.file.response.data) 还是不行, Form(a-form) 也接管不到！

于是想到了 Vue 在接受事件处理的习惯写法上 @change => onChange ，所以就改成了 this.$emit("change", info.file.response.data)，就成功了。。。

至于为什么 Ant Design Vue 没有使用 input 事件的原因，应该是通过了自定义组件中的 model 属性进行了修改，以达到和 React 版本的 Ant Design 组件库的API一致。
Ant Design Vue 还出了一个 v-model 的 FormModel 的版本的From表单，有时间可以看看！

完整代码（记得看到最下面如何使用）：

如何使用:

// 引入定义好的组件
import ImgUpload from '@/components/upload/index.vue'
export default {
  // 并且在这里注册一下
  components: { ImgUpload },

    ...省略其他代码
}


    ...省略其他组件
    
         
   


// 函数，Form 获取结果
normFile(e) {
        console.log('Upload event:', e);
        return e;
 },

重点来了 getValueFromEvent 是 Form(a-form) 接管后, 可以把 onChange 事件的参数（如 event）转化为控件的值！
如果不能理解这句话请看看 双向绑定的原理以及实现！

效果：

上传结果

提交的值