vue3
<template>
<a-modal v-model:visible="visible" :title="`${modalTitle}`" :maskClosable="false" :destroyOnClose="true"
:confirm-loading="confirmLoading" width="650px" cancelText="取消" okText="确定" @ok="handleOk" @cancel="handleCancel">
<a-form ref="modalFormRef" autoComplete="off" :rules="rules" :model="formState" v-bind="formItemLayout">
<a-form-item label="照片">
<a-upload :data="dataObj" :action="uploadUrlLink" list-type="picture" :before-upload="beforeUpload" :on-success="handleAvatarSuccess"
:showUploadList="false" accept=".png,.jpg,.jpeg">
<div class="avatar-uploader">
<img v-if="formState.headUrl" class="avatar-img" :src="imgUrl + formState.headUrl" alt="avatar" />
<span v-else>
<loading-outlined v-if="loading"></loading-outlined>
<plus-outlined v-else></plus-outlined>
</span>
</div>
</a-upload>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { ref,reactive } from 'vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message, Form } from 'ant-design-vue';
import { useStore } from 'vuex' // 引入useStore 方法
import { baseUrl } from "@/config/env";
const uploadUrlLink = ref(`${baseUrl}/uploader/singleUpload`)
const dataObj = ref({
type:1,
})
const formState = ref({
headUrl: '',
});
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;
};
上传成功钩子函数
function handleAvatarSuccess(res, file) {
formState.value.headUrl = res.data.relativeUrl
}
</script>