[Vuejs]-How to write customRequest for Upload component for Ant design vue

by

4👍

✅

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
    }
}
👤Mojtaba G

0👍

  <a-upload
    accept=".zip"
    name="file"
    v-model:file-list="dict.upload_file_list"
    :customRequest="async () => { }"
    :beforeUpload="(file: File, filelist: any[]) => functions.handle_local_before_file_upload(file)"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      Click to Upload a Backup File
    </a-button>
  </a-upload>
👤yingshao xo

Leave a comment