上传图片携带参数vue2 饿了么vue3AntDesign Vue 同理用法

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值