Vue3 Easy Upload

一个功能强大、易于使用的 Vue3 文件上传组件，支持分片上传、Web Worker 多线程处理、文件预览等功能。

特性

• 🚀 Vue3 支持 - 基于 Vue3 Composition API 开发
• 📦 分片上传 - 支持大文件分片上传，提高上传成功率
• 🔧 Web Worker - 使用多线程处理文件分片，不阻塞主线程
• 🎨 TypeScript - 完整的 TypeScript 类型支持
• 📱 响应式 - 支持多种显示模式（单行/双行）
• 🎯 灵活配置 - 丰富的配置选项和回调函数
• 🔍 文件预览 - 支持图片预览和文件下载
• 🎨 自定义样式 - 支持插槽自定义按钮和标签

安装

npm install vue3-easy-upload
# 或
yarn add vue3-easy-upload
# 或
pnpm add vue3-easy-upload

快速开始

全局注册

import { createApp } from 'vue'
import VueEasyUpload from 'vue3-easy-upload'
import 'vue3-easy-upload/style.css'

const app = createApp(App)
app.use(VueEasyUpload)
app.mount('#app')

按需引入

<template>
  <VueEasyUpload
    v-model="fileList"
    :on-upload="handleUpload"
    :on-delete="handleDelete"
    title="选择文件"
    hint="支持拖拽上传，最大500MB"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueEasyUpload } from 'vue3-easy-upload'
import type { FileItem } from 'vue3-easy-upload'

const fileList = ref<FileItem[]>([])

const handleUpload = async (files: FileItem[]) => {
  // 处理文件上传
  console.log('上传文件:', files)
  // 返回上传结果
  return files.map((file) => ({
    id: Math.random().toString(36).substr(2, 9),
    url: 'https://example.com/' + file.name,
  }))
}

const handleDelete = async (file: FileItem) => {
  // 处理文件删除
  console.log('删除文件:', file)
  return true
}
</script>

API

Props

| 参数 | 类型 | 默认值 | 说明 | | -------------- | --------------------------- | ---------------------------------------- | ------------------- | | modelValue | FileItem[] | [] | 文件列表（v-model） | | noBtn | boolean | false | 是否隐藏上传按钮 | | fragment | boolean | false | 是否启用分片上传 | | fragmentSize | number | 2 _ 1024 _ 1024 | 分片大小（字节） | | title | string | '添加附件' | 上传按钮文字 | | doubleRow | boolean | false | 是否双行显示 | | createPerson | string | '' | 上传人 | | dateFormat | string | 'YYYY.MM.DD' | 日期格式 | | readonly | boolean | false | 只读模式 | | alwaysShowBtn | boolean | false | 总是显示操作按钮 | | readyNoDelete | boolean | false | 只能删除未上传文件 | | multiple | boolean | false | 是否支持多选 | | hint | string | boolean | '(不超过500M)' | 提示文字 | | sizeLimit | number | string | boolean | 500 _ 1024 _ 1024 | 单文件大小限制 | | fileList | FileItem[] | [] | 初始文件列表 | | filedList | string[] | ['name', 'size', 'createPerson', 'date'] | 显示字段 | | max | number | string | 1995 | 最大文件数量 | | accept | string | '' | 接受的文件类型 | | onUpload | Function | - | 自动上传回调 | | onManualUpload | Function | - | 手动上传回调 | | onDelete | Function | - | 删除回调 | | onPreview | Function | - | 预览回调 | | onDownload | Function | - | 下载回调 |

Events

| 事件名 | 参数 | 说明 | | ----------------- | ----------------------------- | ---------------- | | update:modelValue | FileItem[] | 文件列表更新 | | exceed | File[] | 超出最大数量限制 | | size-limit | File[] | 超出大小限制 | | after-upload | FileItem[] | 上传完成 | | after-delete | FileItem, number | 删除完成 | | error-trap | { type: number, msg: string } | 错误处理 |

Slots

| 插槽名 | 说明 | | ----------- | ------------ | | title | 上传按钮文字 | | preview | 预览按钮 | | download | 下载按钮 | | delete | 删除按钮 | | sizelabel | 大小标签 | | personlabel | 上传人标签 | | datelabel | 日期标签 |

高级用法

分片上传

<template>
  <VueEasyUpload
    v-model="fileList"
    :fragment="true"
    :fragment-size="1024 * 1024"
    :on-upload="handleChunkUpload"
    title="分片上传"
  />
</template>

<script setup lang="ts">
const handleChunkUpload = async (files: FileItem[]) => {
  // 处理分片上传
  for (const file of files) {
    if (file.splitChunks) {
      // 上传分片
      for (const chunk of file.splitChunks) {
        await uploadChunk(chunk, file.fileHash)
      }
    }
  }
  return files.map((file) => ({ id: file.fileHash }))
}
</script>

自定义样式

<template>
  <VueEasyUpload v-model="fileList">
    <template #title>
      <i class="icon-upload"></i>
      自定义上传按钮
    </template>

    <template #preview="{ file }">
      <i class="icon-eye"></i>
    </template>

    <template #download="{ file }">
      <i class="icon-download"></i>
    </template>
  </VueEasyUpload>
</template>

类型定义

interface FileItem {
  already?: boolean
  createPerson?: string
  dateTime?: Date
  date?: string
  blob?: File | Blob
  name: string
  url?: string
  type: string
  size: string
  fileSize?: number
  totalChunks?: number
  splitChunks?: ChunkItem[]
  fileHash?: string
  [key: string]: any
}

interface ChunkItem {
  start: number
  end: number
  index: number
  hash: string
  blob: Blob
}

许可证

MIT License