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