vue3+ant-design-vue上传组件实现

ant-design-vue的上传组件直接拿来用要写的废话挺多的，封装起来调用就简介很多

组件内实现:

<template>
    <a-upload
      :accept="props.limit&&props.limit.accept || 'image'"
      list-type="picture-card"
      :data="upload.formData"
      :show-upload-list="false"
      :action="upload.uploadPath"
      :before-upload="
        function (file) {
          return beforeUpload(file, index);
        }
      "
      @change="function (file) {handleChange(file, index)}"
    />
</template>
<script setup>
import {ref,getCurrentInstance,watch} from "vue";
import { Form } from 'ant-design-vue';
import { message } from "ant-design-vue";
const { proxy } = getCurrentInstance();
const formItemContext = Form.useInjectFormItemContext();
const props = defineProps({
    limit:{
      type:Object,
      default:null,
    },
    value:{
      type:String,
      default:''
    }
})
const upload=ref({
  formData: {},
  uploadPath: "",
  value:props.value||"",
  loading:false,
})
watch(
    () => props.value,
    (newProps) => {
      upload.value.value = newProps
    }
);

const beforeUpload= async function (file, index) {
  try {
    if(file.size>props?.limit?.size){
      message.error(`需上传小于${props.limit.size/1024/1024}M的文件`);
      return false;
    }
    let resp = await proxy.$http.get(...);
    upload.value.formData = {...};
    upload.value.uploadPath = resp.result.cdn;
    upload.value.temporary =resp.result.url;
    return true;
  } catch (e) {
    console.log(e);
  }

  return false;
}

const handleChange=function (info, index) {
  if (info.file.status === "uploading") {
    upload.value.loading = true;
    return;
  }
  if (info.file.status === "done") {
    upload.value.loading = false;
    upload.value.value =upload.value.temporary;
    triggerChange(upload.value.value)
  }
  if (info.file.status === "error") {
    upload.value.loading = false;
    message.error(info.file.response);
  }
}
const emit = defineEmits(['update:value'])
const triggerChange = (changedValue) => {
  emit('update:value', changedValue)
   //通知form组件value更新
  formItemContext.onFieldChange()
}

</script>

使用：

<template>
<a-form
  :model="formState"
  @finish="onFinish"
>
    <a-form-item
     label="图片"
     name="icon"
     :rules="[{ required: true, message: '请上传图片' }]"
    >
        <upload
          v-model:value="formState.icon"
          :limit="{
            accept:'.jpg,.png',
          }"
        />
  </a-form-item>
  <a-form-item">
    <a-button type="primary" html-type="submit" block>确定</a-button>
  </a-form-item>
</a-form>
</template>
<script setup>
import {ref} from "vue"
import upload from "@/components/upload/index.vue"

const formState=ref({
  icon:'',
})
const onFinish=async function(e){
    console.log(e)
}
</script>