antdesign vue3多文件上传

Ant Design Vue 3.x中的Upload组件支持多文件上传，可以通过设置`multiple`属性来实现。同时，可以通过设置`beforeUpload`属性来控制上传文件的类型和大小等限制条件。以下是一个基于Ant Design Vue 3.x的多文件上传示例：

<template>
  <a-upload
    :action="uploadUrl"
    :headers="headers"
    :data="uploadData"
    :multiple="true"
    :beforeUpload="beforeUpload"
    @change="handleChange"
  >
    <a-button>
      <a-icon type="upload" /> Click to Upload
    </a-button>
  </a-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your_upload_url',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      },
      uploadData: {
        otherParams: 'your_other_params'
      }
    }
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG/PNG file!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
        return false
      }
      return true
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

在上述示例中，我们设置了`multiple`属性为`true`，表示支持多文件上传。同时，我们通过设置`beforeUpload`属性来控制上传文件的类型和大小等限制条件。在上传文件时，我们还可以通过设置`headers`和`data`属性来传递token和其他参数。最后，我们通过监听`change`事件来获取上传文件的状态和信息。