yoyoo-ui

Appearance

FileUpload 文件上传 ​

文件上传组件，支持按钮、拖拽、图片墙三种展示模式，内置文件类型和大小校验，可配合全局配置或自定义 action 使用。

基础用法 ​

tsx
import { defineComponent, reactive } from 'vue'
import FileUpload from '@/components/FileUpload'

export default defineComponent({
  name: 'DemoFileUploadBasic',
  setup() {
    const model = reactive({
      file: '',
      multipleFiles: [] as string[],
      dragFile: '',
      images: [] as string[],
    })

    const section = (title: string) => (
      <div style="font-size:13px; font-weight:600; color:#333; margin-top:4px;">
        {title}
      </div>
    )

    return () => (
      <div class="demo-block">
        <div style="display:flex; flex-direction:column; gap:24px; max-width:500px;">
          {section('按钮模式（单文件上传）')}
          <FileUpload v-model={model.file} type="button" placeholder="点击上传文件" />

          {section('拖拽模式')}
          <FileUpload v-model={model.dragFile} type="drag" placeholder="将文件拖到此处，或点击上传" />

          {section('图片墙模式（多选，限制 3 张）')}
          <FileUpload
            v-model={model.images}
            type="picture-card"
            limit={3}
            placeholder="上传图片"
          />

          {section('多文件上传（限制 5 个，单文件 2MB）')}
          <FileUpload
            v-model={model.multipleFiles}
            type="button"
            limit={5}
            maxFileSize={2}
            placeholder="可同时选择多个文件"
          />

          {section('限制文件类型（仅 .jpg / .png）')}
          <FileUpload
            v-model={model.file}
            type="button"
            accept=".jpg,.png"
            placeholder="仅支持 JPG / PNG"
          />

          {section('禁用状态')}
          <FileUpload v-model={model.file} type="button" disabled placeholder="禁止上传" />

          {section('自定义提示文本')}
          <FileUpload
            v-model={model.file}
            type="drag"
            placeholder="支持拖拽或点击上传"
            tipContent={<div style="font-size:12px; color:#999; margin-top:4px;">支持 PDF、Word 等常见文档格式</div>}
          />

          <div
            style="font-size:13px; color:#666; background:#f5f7fa; padding:12px; border-radius:4px; white-space:pre-wrap; word-break:break-all; line-height:1.6;"
          >
            当前值：{JSON.stringify(model, null, 2)}
          </div>
        </div>
      </div>
    )
  },
})

Props ​

属性名类型默认值说明
modelValuestring | string[] | File | File[]—绑定值（支持 v-model）
type'button' | 'picture-card' | 'drag''button'展示模式
limitnumber1最大文件数，大于 1 时自动开启多选
acceptstring—接受的文件类型，如 .jpg,.png,.pdf
maxFileSizenumber—单文件大小上限，单位 MB
cardSizenumber100picture-card 模式卡片边长，单位 px
disabledbooleanfalse是否禁用
rawbooleanfalse为 true 时不上传，值直接为 File 对象（用于表单暂存）
actionstring—上传地址，不传则通过 installOptions.upload.uploadFile 上传
placeholderstring—按钮文本 / 拖拽区域占位文本
dragContentVNode—拖拽区域自定义内容
tipContentVNode—底部提示内容
propsobject—额外透传给 ElUpload 的属性

模式说明 ​

模式效果
button默认模式，显示一个上传按钮，点击后弹出文件选择器
picture-card图片墙模式，显示网格卡片，点击加号上传，上传后展示缩略图
drag拖拽模式，显示拖拽区域，支持拖放文件或点击选择

文件校验 ​

  • accept — 限制文件扩展名（如 .jpg,.png）或 MIME 类型（如 image/*）
  • maxFileSize — 限制单文件大小（MB），超限时提示警告
  • limit — 限制文件数量，超出时提示"最多上传 N 个文件"

全局配置 ​

在使用前需通过 setInstallOptions 或 app.use(yoyooUi, options) 配置上传和图片预览函数：

ts
import { setInstallOptions } from 'yoyoo-ui'

// 开发/演示环境：本地预览，不实际上传
setInstallOptions({
  upload: {
    uploadFile: async (file) => URL.createObjectURL(file),
    getImageUrl: (url) => url,
  },
})
ts
// 生产环境：上传到服务器，返回相对路径
app.use(yoyooUi, {
  upload: {
    uploadFile: async (file) => {
      const formData = new FormData()
      formData.append('file', file)
      const res = await axios.post('/api/upload', formData)
      return res.data.path // 返回服务器相对路径
    },
    getImageUrl: (path) => {
      return `https://cdn.example.com/${path}` // 拼接完整访问 URL
    },
  },
})

uploadFile(file: File) => Promise<string> ​

接收待上传的 File 对象，返回上传后的文件路径或 URL。返回的字符串会作为组件的 v-model 值。

getImageUrl(path: string) => string ​

根据 uploadFile 返回的路径，拼接出完整的可访问图片 URL。DataTable 的 img 列类型会调用此函数来渲染图片。

在 DataForm 配置中使用 props 传递以上属性。

yoyoo-ui 版权所有