el-upload-chunk

A Vue component for chunk upload based on hui, supporting pause, resume, and breakpoint continuation.

Features

• Large file chunk upload
• Pause and resume upload
• Breakpoint continuation
• Upload progress
• Web Worker
• File hash calculation (MD5)
• Concurrent upload control

Installation

npm install el-upload-chunk --save

Usage

<template>
  <chunk-upload
    upload-url="/api/upload"
    verify-url="/api/verify"
    merge-url="/api/merge"
    :request-config="requestConfig"
    :chunk-size="1 * 1024 * 1024"
    upload-button-text="Upload File"
    tips-text="文件上传的提示语"
    @upload-success="handleUploadSuccess"
    @upload-error="handleUploadError"
    @upload-progress="handleProgress"
    @upload-pause="handlePause"
    @upload-resume="handleResume"
    @upload-cancel="handleCancel"
  />
</template>

<script>
export default {
  data() {
    return {
      requestConfig: {
        timeout: 60000,
        headers: {},
        baseURL: ''
      }
    }
  },
  methods: {
    handleUploadSuccess(file) {
      console.log('Upload success:', file)
    },
    handleUploadError({ file, error }) {
      console.log('Upload error:', error)
    },
    handleProgress(percentage, file) {
      console.log('Upload progress:', file, percentage)
    },
    handlePause(file) {
      console.log('Upload pause:', file)
    },
    handleResume(file) {
      console.log('Upload resume:', file)
    },
    handleCancel(file) {
      console.log('Upload cancel:', file)
    }
  }
}
</script>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | uploadUrl | String | Yes | - | Upload chunk API URL | | verifyUrl | String | Yes | - | Verify file API URL | | mergeUrl | String | Yes | - | Merge chunks API URL | | chunkSize | Number | No | 1MB | Chunk size in bytes | | uploadButtonText | String | No | '点击上传' | Upload button text | | tipsText | String | No | '文件上传的提示语' | Upload tips text | | requestConfig | Object | No | {} | Axios request config |

Events

| Event | Parameters | Description | |-------|------------|-------------| | upload-success | file | Triggered when file upload is complete (文件上传成功) | | upload-error | { file, error } | Triggered when upload fails (文件上传失败) | | upload-progress | { percentage, file } | Triggered during upload (文件上传进度) | | upload-pause | file | Triggered when upload is paused (文件上传暂停) | | upload-resume | file | Triggered when upload is resumed (文件上传继续) | | upload-cancel | file | Triggered when upload is cancelled (文件上传取消) |