UploadImage 上传图片

代码演示

基础用法

<template>
    <a-space :size="24">
        <x-upload-image v-model="images"></x-upload-image>

        <x-upload-image
            v-model="images"
            :width="200"></x-upload-image>
    </a-space>
</template>

<script setup>
import { ref } from 'vue'

const images = ref('')
</script>

<style lang="less" scoped></style>

自定义文案

<template>
    <x-upload-image
        v-model="images"
        text="选择图片"></x-upload-image>
</template>

<script setup>
import { ref } from 'vue'

const images = ref('')
</script>

<style lang="less" scoped></style>

插槽

<template>
    <x-upload-image
        v-model="images"
        :width="240">
        <div class="custom">自定义插槽</div>
    </x-upload-image>
</template>

<script setup>
import { ref } from 'vue'

const images = ref('')
</script>

<style lang="less" scoped>
.custom {
    width: 240px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: @color-border dashed 1px;
    cursor: pointer;
    transition: all 0.15s;

    &:hover {
        border-color: @color-primary;
        color: @color-primary;
    }
}
</style>

裁剪

<template>
    <x-upload-image
        v-model="images"
        :aspect-ratio="1"
        cropper
        text="开启裁剪"></x-upload-image>
</template>

<script setup>
import { ref } from 'vue'

const images = ref('')
</script>

<style lang="less" scoped></style>

圆角

<template>
    <x-upload-image
        v-model="images"
        round></x-upload-image>
</template>

<script setup>
import { ref } from 'vue'

const images = ref('')
</script>

<style lang="less" scoped></style>

批量上传

<template>
    <x-upload-image
        v-model="images"
        draggable
        multiple></x-upload-image>
</template>

<script setup>
import { ref } from 'vue'

const images = ref([])
</script>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
model-value(v-model)	当前输入的值	string array	-
multiple	批量上传	boolean	false
width	宽，单位：px	number	120
height	高，单位：px	number	120
text	按钮文字	string	-
maxSize	最大限制	string number	2M
accept	允许上传的文件类型	string	image/*
disabled	是否禁用，禁用后无法上传，可以正常回显	boolean	false
round	是否圆角	boolean	false
cropper	是否开启裁剪	boolean	false
aspect-ratio	比例，开启裁剪时有效，详见 Cropper	number	0
quality	图片质量，开启裁剪时有效，详见 Cropper	number	1
draggable	拖拽，批量上传有效	boolean	false

Events

事件名	说明	回调参数
change	内容发生改变	modelValue

Slots

名称	说明
default	上传按钮
icon	按钮图标
text	按钮文字