BreezeUI
  • 简体中文

    • Upload 上传

    通过点击或者拖拽上传文件。

    组件特性

    • 📁 多文件支持：支持 multiple 属性多选文件上传。
    • 📄 文件类型限制：支持 accept 属性限制可上传的文件类型。
    • 📊 数量和大小限制：支持 maxCount 限制上传数量，maxSize 限制文件大小。
    • ⏫ 自动上传：支持 autoUpload 属性控制选取文件后是否立即上传。
    • 🔧 自定义请求：支持 action、headers、data 配置上传请求参数。
    • 📝 表单集成：无缝集成 BrForm，支持 vee-validate 验证。
    • 🎨 主题定制：支持 TailwindCSS 局部样式覆盖。

    基础用法

    <script setup lang="ts">
import { ref } from 'vue'
import { BrUpload, BrUploadDropzone, BrUploadFileList, BrUploadFileItem, BrUploadPreview } from '@breezeui/vue'
import { UploadCloud } from 'lucide-vue-next'

const files = ref([])
const previewFile = ref(null)
const previewOpen = ref(false)

const handlePreview = (file: any) => {
  previewFile.value = file
  previewOpen.value = true
}

const handleExceed = () => {
  alert('Exceeded maximum file count!')
}
</script>

<template>
  <div>
    <BrUpload 
      v-model="files" 
      multiple
      :max-count="5"
      action="https://jsonplaceholder.typicode.com/posts/"
      @preview="handlePreview"
      @exceed="handleExceed"
    >
      <BrUploadDropzone v-slot="{ isDragOver }">
        <div class="flex flex-col items-center justify-center py-6">
          <UploadCloud 
            class="w-12 h-12 mb-4 transition-colors" 
            :class="isDragOver ? 'text-[var(--br-primary)]' : 'text-[var(--br-muted-foreground)]'" 
          />
          <p class="text-lg font-medium text-[var(--br-foreground)]">Click or drag files to this area</p>
          <p class="text-sm text-[var(--br-muted-foreground)] mt-2">Supports multi-file upload, max 5 files.</p>
        </div>
      </BrUploadDropzone>
      
      <BrUploadFileList v-slot="{ files }">
        <BrUploadFileItem v-for="file in files" :key="file.id" :file="file" />
      </BrUploadFileList>
    </BrUpload>

    <BrUploadPreview v-model:open="previewOpen" :file="previewFile" />
  </div>
</template>

    表单集成

    Upload 组件可以无缝集成到 BrForm 中，并支持 vee-validate 验证。

    <script setup lang="ts">
import { ref } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { 
  BrUpload, 
  BrUploadTrigger, 
  BrUploadFileList, 
  BrUploadFileItem,
  BrUploadPreview,
  BrForm, 
  BrFormItem, 
  BrFormLabel, 
  BrFormControl, 
  BrFormMessage,
  BrButton
} from '@breezeui/vue'
import { Upload } from 'lucide-vue-next'

const schema = toTypedSchema(
  z.object({
    documents: z.array(z.any()).min(1, 'Please upload at least one document')
  })
)

const form = useForm({
  validationSchema: schema,
  initialValues: {
    documents: []
  }
})

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted with values:', values)
  alert('Form submitted successfully!')
})

const previewFile = ref<any>(null)
const previewOpen = ref(false)

const handlePreview = (file: any) => {
  previewFile.value = file
  previewOpen.value = true
}
</script>

<template>
  <div>
    <BrForm class="space-y-6 max-w-md" @submit="onSubmit">
      <BrFormItem name="documents">
        <BrFormLabel>Important Documents *</BrFormLabel>
        <BrFormControl>
          <BrUpload
            action="https://jsonplaceholder.typicode.com/posts/"
            @preview="handlePreview"
          >
            <BrUploadTrigger>
              <BrButton variant="outline" type="button">
                <Upload class="w-4 h-4 mr-2" />
                Select Document
              </BrButton>
            </BrUploadTrigger>
            <BrUploadFileList v-slot="{ files }">
              <BrUploadFileItem v-for="file in files" :key="file.id" :file="file" />
            </BrUploadFileList>
          </BrUpload>
        </BrFormControl>
        <BrFormMessage />
      </BrFormItem>
      <BrButton type="submit">Submit Form</BrButton>
    </BrForm>

    <BrUploadPreview v-model:open="previewOpen" :file="previewFile" />
  </div>
</template>

    API

    BrUpload 属性

    属性名类型默认值说明
    modelValueUploadFile[][]绑定的文件列表
    namestring'file'上传的文件字段名
    actionstring''必选参数，上传的地址
    headersRecord<string, string>{}设置上传的请求头部
    dataRecord<string, any>{}上传时附带的额外参数
    multiplebooleanfalse是否支持多选文件
    acceptstring''接受上传的文件类型
    maxCountnumber-最大允许上传个数
    maxSizenumber-文件大小限制（字节）
    disabledbooleanfalse是否禁用
    autoUploadbooleantrue是否在选取文件后立即进行上传

    BrUpload 事件

    事件名说明回调参数
    update:modelValue文件列表改变时触发(files: UploadFile[])
    change文件状态改变时触发(file: UploadFile, fileList: UploadFile[])
    remove文件列表移除文件时的钩子(file: UploadFile, fileList: UploadFile[])
    success文件上传成功时的钩子(response: any, file: UploadFile, fileList: UploadFile[])
    error文件上传失败时的钩子(error: Error, file: UploadFile, fileList: UploadFile[])
    progress文件上传时的钩子(event: ProgressEvent, file: UploadFile, fileList: UploadFile[])
    exceed文件超出个数限制时的钩子(files: File[], fileList: UploadFile[])
    preview点击文件列表中已上传的文件时的钩子(file: UploadFile)