hao-upload

Vue 3 檔案上傳組件庫，支援分片上傳、檔案列表等功能

安裝

npm install hao-upload
# 或
yarn add hao-upload
# 或
pnpm add hao-upload

TypeScript 配置

如果您使用 TypeScript，請在 tsconfig.json 中添加類型聲明：

{
  "compilerOptions": {
    "types": ["hao-upload"]
  }
}

使用方法

1. 導入組件和樣式

<template>
  <div>
    <HaoChunkedUpload v-model="uploadedFiles" />
    <HaoFileList :files="uploadedFiles" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HaoChunkedUpload, HaoFileList } from 'hao-upload'
// 重要：必須導入樣式檔案
import 'hao-upload/style'

const uploadedFiles = ref([])
</script>

2. 基本使用範例

<template>
  <div class="upload-demo">
    <HaoChunkedUpload 
      v-model="files"
      :chunk-size="5 * 1024 * 1024"
      :concurrency="3"
      :auto-upload="false"
      @upload-start="handleUploadStart"
      @upload-progress="handleProgress"
      @upload-success="handleSuccess"
      @upload-error="handleError"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HaoChunkedUpload } from 'hao-upload'
import 'hao-upload/style'

const files = ref([])

const handleUploadStart = (file) => {
  console.log('開始上傳:', file.name)
}

const handleProgress = (progress) => {
  console.log('上傳進度:', progress)
}

const handleSuccess = (result) => {
  console.log('上傳成功:', result)
}

const handleError = (error) => {
  console.error('上傳失敗:', error)
}
</script>

3. 檔案列表組件

<template>
  <HaoFileList 
    :files="uploadedFiles"
    :max-files="10"
    @file-removed="handleFileRemoved"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HaoFileList } from 'hao-upload'
import 'hao-upload/style'

const uploadedFiles = ref([])

const handleFileRemoved = (index) => {
  uploadedFiles.value.splice(index, 1)
}
</script>

組件屬性

HaoChunkedUpload

| 屬性 | 類型 | 預設值 | 說明 | |------|------|--------|------| | chunkSize | number | 5MB | 分片大小（位元組） | | concurrency | number | 5 | 併發上傳數量 | | autoUpload | boolean | false | 選擇檔案後自動上傳 |

HaoFileList

| 屬性 | 類型 | 預設值 | 說明 | |------|------|--------|------| | files | Array | [] | 檔案列表 | | maxFiles | number | 無限制 | 最大檔案數量 |

事件

HaoChunkedUpload 事件

• update:modelValue: 檔案列表更新
• file-selected: 檔案被選擇
• upload-start: 開始上傳
• upload-progress: 上傳進度
• upload-success: 上傳成功
• upload-error: 上傳失敗
• upload-paused: 上傳暫停
• upload-resumed: 上傳恢復

HaoFileList 事件

• file-removed: 檔案被移除

注意事項

1. 必須導入樣式檔案：使用組件前請確保導入了 hao-upload/style
2. Vue 3 專用：此組件庫僅支援 Vue 3
3. 檔案大小限制：建議單個檔案不超過 2GB
4. 瀏覽器支援：需要支援 File API 和 Blob API 的現代瀏覽器

開發

# 安裝依賴
pnpm install

# 開發模式
pnpm dev

# 構建
pnpm build

# 發布
npm publish

授權

MIT