Upload 上传

用户上传任意内容的组件。

基本用法

<template>
  <i-upload @change="handleChange" />
</template>

<script setup>
const handleChange = (file) => {
  console.log(file)
}
</script>

显示代码复制代码复制代码

不同主题

可通过 theme 属性控制不同属性的上传组件：

点击上传

点击或拖动到框内上传支持不超过 10M 的 excel 类型文件

<template>
  <div className="idesign-demo-block-row">
    <i-upload theme="button" @change="handleChange" />
    <i-upload theme="block" @change="handleChange" />
    <i-upload theme="drag" @change="handleChange" />
  </div>
</template>

<script setup>
const handleChange = (file) => {
  console.log(file)
}
</script>

显示代码复制代码复制代码

自定义提示

可通过 placeholder 属性控制自定义占位符：

<template>
  <i-upload placeholder="自定义占位符" />
</template>

显示代码复制代码复制代码

自定义节点

可通过包裹自定义节点来展示任意上传组件：

<template>
  <i-upload>
    <i-button>点击上传</i-button>
  </i-upload>
</template>

显示代码复制代码复制代码

Upload Attributes

属性	说明	类型	默认值
placeholder	占位符	string	--
theme	上传组件风格	"button"〡"block"〡"drag"	button
maxSize	文件大小限制，单位 M	number	10

Upload Events

属性	说明	类型	默认值
change	上传时触发	(file: File) => void	--