ImgUploader

图片上传组件，支持 PNG / WEBP / JPG / JPEG 格式，内置文件大小和类型校验，支持点击与拖拽两种方式。拖拽悬停时容器上会有 data-drag-over="true" 标记，可配合 UnoCSS 变体定制样式。

基本用法

默认

标题 + 说明 + 虚线边框的上传区。

上传参考图

支持 PNG / JPG / WEBP，最大 5MB

<script setup lang="ts">
import { ImgUploader } from '@tripo3d/design';

function onChange(files: File[]) {
  console.log(files);
}
</script>

<template>
  <ImgUploader
    title="上传参考图"
    description="支持 PNG / JPG / WEBP，最大 5MB"
    @change="onChange"
    @size-error="(file) => console.log('too large', file)"
    @type-error="(file) => console.log('unsupported', file)"
  />
</template>

带图标

icon

上传正视图

支持 PNG / JPG / WEBP，最大 5MB

<ImgUploader
  icon="i-tripo:front-view"
  title="上传正视图"
  description="支持 PNG / JPG / WEBP，最大 5MB"
  @change="onChange"
/>

多文件上传

multiple

一次选择多张图片。

批量上传

支持同时上传多张图片

<ImgUploader
  multiple
  title="批量上传"
  description="支持同时上传多张图片"
  @change="onChange"
/>

自定义大小限制

size

size 以 MB 为单位。超出会触发 size-error。

小图上传

单图 ≤ 2 MB

<ImgUploader
  :size="2"
  title="小图上传"
  description="单图 ≤ 2 MB"
  @change="onChange"
  @size-error="(file) => toast.error('文件过大')"
/>

ImgUploaderInput

简化版，没有 UI 展示层，仅提供一个透明 <input>，适合自行封装上传入口：

<script setup lang="ts">
import { ImgUploaderInput } from '@tripo3d/design';
</script>

<template>
  <div class="relative size-24">
    <MyCustomUI />
    <ImgUploaderInput
      class="absolute inset-0 opacity-0 cursor-pointer"
      multiple
      @change="onChange"
    />
  </div>
</template>

API

ImgUploader Props

名称	类型	默认值	说明
title	string	—	上传区标题
description	string	—	说明文字
icon	string	—	图标类名（UnoCSS icon）
multiple	boolean	—	允许多文件
required	boolean	—	显示必填标记
size	number	5	单文件大小上限（MB）
class	string	—	容器 class

ImgUploader Events

事件	Payload	说明
change	(files: File[])	文件选择/拖拽成功
size-error	(file: File)	文件超过大小限制
type-error	(file: File)	文件类型不支持

ImgUploaderInput

Props / Events 与 ImgUploader 相同，但不包含标题、描述和虚线边框等 UI 层。