How to write customRequest for Upload component for Ant design vue

Question

I have tried How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest? but it not work for ant design vue. Can anyone write an example please?

Answer 1

This is the HTML component:

<a-upload-dragger
    name="file"
    :multiple="true"
    :customRequest="uploadfiles"
    @change="handleChange">
</a-upload-dragger>

You need to handle customRequest:

  uploadfiles({ onSuccess, onError, file }) {
    this.upload(file)
      .then(() => {
        onSuccess(null, file);
      })
      .catch(() => {
        console.log('error');
      });
  };

file has such a structure:

name: "YourFileName.txt"
lastModified: ...
lastModifiedDate: ...
webkitRelativePath: ""
size: 24
type: "text/plain"
uid: "vc-upload-xxxxxx..."

You can implement your own upload function.

You can handle status changes of the file upload progress:

handleChange(info) {
    const status = info.file.status;
    if (status !== 'uploading') {
      // show update progress console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      // show success message
    } else if (status === 'error') {
      // show error message
    }
}