Ant Design Vue Upload：详解 `customRequest` 实现自定义文件上传

2023-10-12 14:09:54

引言

Ant Design Vue 是一个基于 Ant Design 的 Vue UI 框架，提供了丰富的组件库，包括 Upload 组件，用于实现文件上传功能。customRequest 属性允许开发者自定义文件上传的请求逻辑，从而满足不同的上传需求。

`customRequest` 的用法

customRequest 属性是一个函数，接受一个 file 参数，该参数表示要上传的文件。开发者可以根据需要自定义上传请求逻辑，例如：

const customRequest = async (file) => {
  // 自定义上传请求逻辑
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
  });

  if (response.status === 200) {
    return response.json();
  } else {
    throw new Error('上传失败');
  }
};

在该示例中，customRequest 函数通过使用 FormData 创建一个包含文件数据的表单，并使用 fetch API 向服务器发送 POST 请求。服务器端可以根据需要处理上传的文件。

优点和局限性

使用 customRequest 可以实现以下优点：

灵活控制上传逻辑： 开发者可以完全自定义上传请求逻辑，满足不同的上传需求。
集成第三方服务： 可以集成第三方文件存储或处理服务，例如 Amazon S3、Google Cloud Storage 等。
个性化错误处理： 可以在请求失败时自定义错误处理逻辑，提供更友好的用户体验。

需要注意以下局限性：

增加复杂性： 自定义上传逻辑可能会增加组件的使用复杂性，需要开发者有较好的 JavaScript 和网络请求知识。
安全性问题： 如果上传逻辑未正确实现，可能会导致安全性问题，例如跨站请求伪造（CSRF）。

示例实现

以下是一个使用 customRequest 实现自定义文件上传的完整示例：

<template>
  <a-upload :custom-request="customRequest" :show-upload-list="false">
    <button type="button">上传文件</button>
  </a-upload>
</template>

<script>
import { Upload } from 'ant-design-vue';

export default {
  components: { Upload },

  methods: {
    customRequest(file) {
      // 自定义上传请求逻辑
      // ...
    },
  },
};
</script>