ModelUploader

3D 模型上传组件，默认支持 .fbx / .obj / .stl / .glb 格式，单文件选择。与 ImgUploader 结构一致，内置文件类型与大小校验。

基本用法

默认

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

上传 3D 模型

支持 FBX / OBJ / STL / GLB，最大 150MB

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

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

<template>
  <ModelUploader
    title="上传 3D 模型"
    description="支持 FBX / OBJ / STL / GLB，最大 150MB"
    @change="onChange"
    @size-error="(file) => console.log('too large', file)"
    @type-error="(file) => console.log('unsupported', file)"
  />
</template>

带图标和必填标记

icon + required

参考模型

FBX / OBJ / STL / GLB

<ModelUploader
  icon="i-tripo:info-circle-monotone"
  title="参考模型"
  description="FBX / OBJ / STL / GLB"
  required
  @change="onChange"
/>

自定义大小限制

size

size 以 MB 为单位。

小模型

单个文件 ≤ 50 MB

<ModelUploader
  :size="50"
  title="小模型"
  description="单个文件 ≤ 50 MB"
  @change="onChange"
  @size-error="(file) => toast.error('文件过大')"
/>

自定义标题 / 描述

通过 title / description 两个插槽覆写默认的文本渲染：

<ModelUploader @change="onChange">
  <template #title>
    <span class="text-purple-1 font-semibold">参考模型</span>
  </template>
  <template #description>
    <span class="text-white-60">拖拽或点击上传</span>
  </template>
</ModelUploader>

ModelUploaderInput

简化版本，只包含一个透明的 <input type="file">，适合自定义 UI 外观：

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

<template>
  <div class="relative size-24">
    <MyCustomUI />
    <ModelUploaderInput
      class="absolute inset-0 opacity-0 cursor-pointer"
      accept=".glb,.gltf"
      :size="100"
      @change="onChange"
    />
  </div>
</template>

API

ModelUploader Props

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

ModelUploader Events

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

ModelUploader Slots

插槽	作用域	说明
title	—	覆写标题渲染
description	—	覆写描述渲染

ModelUploaderInput Props

名称	类型	默认值	说明
accept	string	'.fbx,.obj,.stl,.glb'	接受的文件类型
size	number	150	文件大小上限（MB）