有没有熟悉ant-design这个UI库的 问个表单问题？

Question

一个vue组件：

<a-form :form="form" @submit="handleSubmit">
      <a-form-item label="乐谱文件" v-bind="formItemLayout2">
        <div class="dropbox">
          <a-upload-dragger
            v-decorator="[
              'dragger',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile,
                rules: [
                  {
                    required: true,
                    message: '请上传至少一个文件'
                  }
                ]
              }
            ]"
            name="files"
            :multiple="true"
            :customRequest="uploadFiles"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              点击或拖拽上传
            </p>
            <p class="ant-upload-hint">
              支持单文件或多个文件
            </p>
          </a-upload-dragger>
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 2 }">
        <a-button type="primary" html-type="submit" :disabled="formError()">
          提交
        </a-button>
      </a-form-item>
    </a-form>
    
    
script标签部分内容    
    methods: {
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    uploadFiles(e) {
      const file = e.file;
      const reader = new FileReader();
      reader.onload = function fileReadCompleted() {
        uploadFile({ fileName: file.name, data: reader.result })
          .then(res => {
            console.log(e);
            e.onSuccess(res);
          })
          .catch(err => {
            e.onError(err);
          });
      };
      reader.readAsBinaryString(file);
    },
    formError() {
      const errs = this.form.getFieldsError();
      return Object.keys(errs).some(field => errs[field]);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
        }
      });
    }
  }

点击提交以后，执行this.form.validateFields，打印出来的是：

1. composer: undefined
2. credit: 10
3. desp: undefined
4. dragger: Array(1)

5. 0:

   1. lastModified: (...)
   2. lastModifiedDate: (...)
   3. name: (...)
   4. originFileObj: (...)
   5. percent: (...)
   6. response: undefined
   7. size: (...)
   8. status: (...)
   9. type: (...)
   10. uid: (...)
   11. xhr: undefined
6. lyricist: undefined
7. name: "aaabcc"
8. translator: undefined
9. __proto__: Object

?我现在想把dragger的内容改为后端返回的内容 或者response里放进去也可以

该怎么做？

Answer 1

1,首先获取 dragger 的值 定义变量 dragger

1. 使用 冒号赋值

<a-upload-dragger
            :v-decorator="dragger"
            
          >