ant-design vue 上传文件,自定义上传，并回显

Ant Design Vue（简称AntD Vue）是一个基于Vue.js的UI设计套件，其中包含了一个功能丰富的文件上传组件。在AntD Vue中，你可以使用`<a-upload>`组件来实现文件上传以及自定义上传处理。以下是基本步骤：

1. 首先，安装`@ant-design/icons`和`@ant-design/vue/upload`依赖：

   npm install @ant-design/icons @ant-design/icons-vue @ant-design/vue upload

2. 使用`<a-upload>`标签配置上传组件：

<a-upload
  action="你的服务器接收文件的URL"
  :show-file-list="false" // 隐藏默认的文件列表
  :before-upload="beforeUpload" // 自定义上传前的处理函数
  :on-success="handleSuccess" // 文件上传成功后的回调
>
  <a-icon slot="trigger" type="upload" /> <!-- 指定图标 -->
</a-upload>

在这里，`beforeUpload`函数可以用来验证文件、限制大小、设置进度条等功能，`handleSuccess`则用来处理上传完成后的业务逻辑。

3. 自定义上传逻辑：

export default {
  methods: {
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 5) { // 限制文件大小为5MB
        message.error('文件过大，请上传小于5MB的文件！');
        return false;
      }
      // 其他验证逻辑...
      return true; // 返回true表示允许上传
    },
    
    handleSuccess(response, file) {
      // response是你服务器返回的数据，file则是上传的文件对象
      console.log(response);
      this.uploadedFiles.push(file.name); // 回显已上传文件名
    }
  },
  data() {
    return {
      uploadedFiles: [], // 存储已上传文件名数组
    };
  }
}

4. 如果需要回显已上传的文件，可以在表单或者其他地方展示`uploadedFiles`数组。

注意，这只是一个基础示例，实际使用中可能还需要根据你的业务需求进行调整。如果你想要更详细的文件上传控件定制，比如分片上传、断点续传等功能，可能需要查阅AntD Vue的文档或使用其提供的API。