Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

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

一个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里放进去也可以

该怎么做?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

  1. 使用 冒号赋值
<a-upload-dragger
            :v-decorator="dragger"
            
          >

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...