问题描述：

ant design vue 的form表单上文件上传组件利用v-decorator相关属性赋初始值、上传文件、提交表单时获取数据

代码：

<template>
  <div>
    <a-form :form="testForm">
      <a-form-item label="上传头像">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          @preview="handlePreview"
          v-decorator="[
            'headImage',
            {
              rules: [
                { required: true, message: '请上传相关文件' }
              ],
              initialValue: fileList,
              valuePropName: 'fileList',
              getValueFromEvent: normFiles
            }
          ]"
        >
          <div v-if="fileList.length < 1 && uploadingFile == false">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="批量上传文件">
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          v-decorator="[
            'batchFiles',
            {
              rules: [
                { required: true, message: '请上传相关文件' }
              ],
              initialValue: batchFileList,
              valuePropName: 'fileList',
              getValueFromEvent: normBatchFiles
            }
          ]"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">Click or drag file to this area to upload</p>
          <p class="ant-upload-hint">
            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
            band files
          </p>
        </a-upload-dragger>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="submitFunc">提交</a-button>
      </a-form-item>
    </a-form>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testForm: this.$form.createForm(this),
      previewVisible: false,
      previewImage: '',
      fileList: [],
      fileUrl: [],
      batchFileList: [],
      uploadingFile: false,
    }
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    normFiles(e) {
      if (e.file.status === "uploading") {
        this.uploadingFile = true;
      }
      if (e.file.status === "removed") {
        this.fileList = [];
        this.uploadingFile = false;
        return {} && [];
      }
      if (e.file.status === "done") {
        this.fileList.push(e.file.response);
        this.uploadingFile = false;
      }
      return e && e.fileList
    },
    normBatchFiles(e) {
      if (e.file.status === "removed") {
        let deleteUid = e.file.uid;
        this.batchFileList = this.batchFileList.filter(function(item){
          return item.uid != deleteUid
        });
        if (e.fileList.length == 0) {
          return {} && [];
        }
      }
      if (e.file.status === "done") {
        this.batchFileList.push(e.file.response);
      }
      return e && e.fileList;
    },
    submitFunc() {
      this.testForm.validateFields((err, values) => {
        console.log(values, 'values');
      });
    }
  },
  mounted() {
    this.fileList.push({
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    });
    this.batchFileList.push({
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    });
  },
}
</script>

解决方案描述：

demo的环境是在nuxt下，创建项目的时候已选择了ant design，所以不再需要单独引用，请自行根据实际环境和需要引用ant design。

针对的upload组件是，ant design vue里的照片墙和拖拽上传。其中标签<a-upload>是针对照片墙的，<a-upload-dragger>是针对拖拽上传，这两个上传组件稍做修改几乎可以覆盖大多数需要上传文件的需求。

最关键的地方是需要v-decorator中的initialValue、valuePropName、getValueFromEvent

v-decorator="[
  'headImage',
  {
    rules: [
      { required: true, message: '请上传相关文件' }
    ],
    initialValue: fileList,
    valuePropName: 'fileList',
    getValueFromEvent: normFiles
  }
]"

initialValue：对表单该字段赋初始值

valuePropName：子节点的值的属性，如 Switch 的是 'checked'（详见官网）

getValueFromEvent：可以把 onChange 的参数（如 event）转化为控件的值（详见官网）

注意：demo中的<a-upload>是为了满足上传图片（限制只能且必须上传一个头像图片），<a-upload>和<a-upload-dragger>的getValueFromEvent请自行根据后端文件上传接口以及实际需求做必要的调整，mounted中对两个数组添加了数据，实际需求中请自行放到获取对应数据的方法中。