vue3+antd-desigin-vue 上传文件-Go服务器开发

beforeUpload: 在文件上传之前进行验证，这里主要检查文件类型和大小。
handleChange: 当文件状态改变时触发，处理成功或失败的信息反馈。
accept: 用于限制可以上传的文件类型，这里只允许 JPEG 和 PNG 格式。
show-upload-list: 设置为 false 隐藏默认的上传列表。

在 Vue 3 中使用 Ant Design Vue 实现文件上传的功能，可以通过 Upload 组件来完成。下面是一个简单的示例，展示如何创建一个文件上传的功能。

安装 Ant Design Vue

首先确保你已经安装了 ant-design-vue。如果还没有安装，可以使用 npm 或 yarn 来安装：

npm install ant-design-vue
# or
yarn add ant-design-vue

示例代码

接下来，你可以在你的 Vue 组件中使用 Upload 组件。以下是一个基本的实现：

<template>
  <a-upload
    :before-upload="beforeUpload"
    :on-change="handleChange"
    accept=".jpg,.jpeg,.png"
    :show-upload-list="false"
  >
    <a-button icon="upload">点击上传</a-button>
  </a-upload>
</template>

<script setup>
import { ref } from 'vue';
import { Upload, Button, message } from 'ant-design-vue';

const fileList = ref([]);

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('您只能上传 JPG/PNG 文件!');
  }
  
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('文件大小必须小于 2MB!');
  }
  
  return isJpgOrPng && isLt2M;
};

const handleChange = (info) => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  
  if (info.file.status === 'done') {
    message.success(`${info.file.name} 文件上传成功`);
    
    // 可以在这里处理返回的数据，例如将其添加到fileList
    fileList.value.push(info.file);
    
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>