UploadImage 上传图片

代码演示

基础用法

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

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

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

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

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

自定义文案

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

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

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

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

插槽

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

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

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

<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>

裁剪

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

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

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

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

圆角

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

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

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

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

批量上传

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

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

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

<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	按钮文字