vue 3.2 setup ant-design-vue upload封装

<template>
  <div class="s-upload">
    <a-space>
      <template v-if="urlList.length">
        <span class="img" v-for="(url, index) in urlList" :key="index">
          <a-image :width="90" :height="90" :src="url">
            <template #previewMask>
              <a-space>
                <eye-outlined />
                <delete-outlined @click.stop="handelRemove(index)" />
              </a-space>
            </template>
          </a-image>
        </span>
      </template>
      <a-upload
        v-if="urlList.length < maxCount"
        :maxCount="maxCount"
        :customRequest="customRequest"
        :beforeUpload="beforeUpload"
        list-type="picture-card"
        :fileList="[]"
        multiple
        class="upload"
      >
        <div v-if="loading">
          <loading-outlined />
          <div class="m-t-8">上传中...</div>
        </div>
        <div v-else>
          <plus-outlined />
          <div class="m-t-8">上传</div>
        </div>
      </a-upload>
    </a-space>
  </div>
</template>
<script>
import {
  PlusOutlined,
  LoadingOutlined,
  EyeOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import { message, Upload, Modal } from 'ant-design-vue'
import { fileUpload } from '@/api/common'
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  inheritAttrs: false,
  name: 'Supload',
  components: {
    PlusOutlined,
    LoadingOutlined,
    EyeOutlined,
    DeleteOutlined
  },
  props: {
    modelValue: {
      type: String,
      default: () => {
        return ''
      }
    },
    validType: {
      type: Array,
      default: () => ['JPG', 'JPEG', 'PNG', 'GIF']
    },
    maxCount: {
      type: Number,
      default: 3
    }
  },
  setup(props, { emit }) {
    const loading = ref(false)
    const { validType } = props
    const urlList = ref([])
    const customRequest = ({ file }) => {
      loading.value = true
      const formData = new FormData()
      formData.append('file', file)
      fileUpload(formData)
        .then((res) => {
          if (res.code === 0) {
            const { fileUrl } = res.data
            urlList.value.push(fileUrl)
          }
        })
        .catch(() => {
          message.error('系统错误!')
        })
        .finally(() => {
          loading.value = false
        })
    }
    function handelFileSuffix(name) {
      return name.substring(name.lastIndexOf('.') + 1).toUpperCase()
    }
    function beforeUpload(file) {
      const suffix = handelFileSuffix(file.name)
      if (validType.length) {
        const isValidType = validType.includes(suffix)
        if (!isValidType) {
          message.error(`【${file.name}】文件格式不合法!`)
          return Upload.LIST_IGNORE
        }
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        message.error('文件超过 2MB!')
        return Upload.LIST_IGNORE
      }
    }
    function isFinish() {
      return loading.value
    }
    function handelRemove(index) {
      Modal.confirm({
        title: '确认删除?',
        onOk() {
          urlList.value.splice(index, 1)
        }
      })
    }
    watch(
      () => props.modelValue,
      () => {
        if (props.modelValue && typeof props.modelValue === 'string') {
          urlList.value = props.modelValue.split(',')
        }
      }
    )
    watch(
      () => urlList.value,
      () => {
        emit('update:modelValue', urlList.value.join(','))
      },
      { deep: true }
    )
    return {
      handelFileSuffix,
      loading,
      urlList,
      customRequest,
      beforeUpload,
      isFinish,
      handelRemove
    }
  }
})
</script>

<style scoped lang="scss">
.img {
  width: 102px;
  height: 102px;
  display: inline-block;
  border: 1px dashed #d9d9d9;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  ::v-deep(.ant-image) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

 <a-form-item label="营业执照" name="businessLicense">
   <Supload v-model="formState.businessLicense" />
 </a-form-item>
 businessLicense： 格式为 字符串，多个,拼接