Ant Design Vue |表单上传|如何设置initialValue

Question

我在Upload组件中定义initialValue时遇到了问题，我尝试的另一件事是使用监视器，并更新formValue和更新props FileList的方法。有人知道这是如何工作的吗？

Parent.vue

<Child :file="file"/>
...
async loadFile(item) {
  this.loading = true
  const { data } = await axios(..., {
    ...
    responseType: 'blob',
  })
  const file = new File([data], item.name, { type: data.type });

  this.file= {
    Id: item.id,
    Type: item.attributes.type,
    IsPublic: item.attributes.is_public,
    Descr: item.attributes.descr,
    File: [file]
  }
  this.showForm();
  this.loading = false
},

Children.vue

<a-upload
  :accept="formats"
  :before-upload="beforeUploadEvt"
  :disabled="!formats"
  :remove="removeFileEvt"
  v-decorator="[
    'File',
    {
      valuePropName: 'fileList',
      getValueFromEvent: getValueEvt,
      rules: [{ required: true, message: 'Select a file' }]
    },
  ]" >
  <a-button> <a-icon type="upload" /> Select a file</a-button>
</a-upload>

methods: {
  beforeUploadEvt(file) {
    this.form.setFieldsValue({
      File: [file]
    });
    return false;
  },
  removeFileEvt() {
    this.formulario.setFieldsValue({
      Archivo: []
    });
  },
  getValueEvt(e) {
    if (Array.isArray(e)) {
      return e;
    }
    if(e && e.fileList.length > 1) {
      return e && [e.fileList[1]];
    }
    return e && e.fileList;
  },
},
watch: {
  adjunto: {
    immediate: true,
    deep: true,
    handler(obj) {
      if(obj.File) {
        this.getValueEvt(obj.File);
        //  this.formulario.setFieldsValue({
        //    File: obj.File
        //  });
      }
    }
  }
}

尝试我所能想到的最基本的示例，使用属性defaultFileList

<a-upload
  :accept="formats"
  :before-upload="beforeUploadEvt"
  :disabled="!format"
  :remove="removeFileEvt"
  :default-file-list="this.file.File">
  <a-button> <a-icon type="upload" /> Select file</a-button>
</a-upload>

然后，这是我得到的控制台警告和错误，所以看起来是关于类型的。

​

Answer 1

如果有人还在寻找这个问题的答案。您不需要加载文件，将数据包装在适当的对象中会有所帮助。As in this example

fileList: [{
  uid: '-1',
  name: 'image.png',
  status: 'done',
  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}]

<a-upload
  ....
  :file-list="fileList"
>