时间戳

首页 > 解决方案 > 如何为 Ant design vue 编写上传组件的 customRequest

javascript - 如何为 Ant design vue 编写上传组件的 customRequest

问题描述

我尝试过如何在 Ant Design Upload 组件中设置 customRequest 以使用 XMLHttpRequest？但它不适用于 ant design vue。有人可以写一个例子吗？

标签： javascriptvue.jsantd

解决方案

这是 HTML 组件：

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

您需要处理customRequest：

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

文件有这样的结构：

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

您可以实现自己的上传功能。

您可以处理文件上传进度的状态变化：

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
    }
}

推荐阅读