file-upload-slice-vue

基于Vue的文件切片上传组件，兼容初始化查询、chunkHash校验，支持并发/串行上传、断点续传。

安装

npm install file-upload-slice-vue spark-md5 --save

配置项

| 配置名 | 类型 | 默认值 | 说明 | |--------------|----------|-----------------|--------------------------| | initUrl | string | '' | 初始化查询接口地址 | | uploadUrl | string | 必传 | 分片上传接口地址 | | mergeUrl | string | 必传 | 文件合并接口地址 | | chunkSize | number | 510241024 | 分片大小（默认5MB） | | concurrency | number | 3 | 并发数（仅并发上传有效） | | strategy | string | 'concurrent' | 上传策略（concurrent/serial） |

使用示例

Vue3 Composables方式

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="startUpload" :disabled="!file || uploadStatus === 'uploading'">
      开始上传
    </button>
    <button @click="pauseUpload" :disabled="uploadStatus !== 'uploading'">
      暂停上传
    </button>
    <div v-if="uploadStatus === 'pending'">
      已上传分片：{{ uploadedChunks.length }}/{{ chunkTotal }}
    </div>
    <div v-if="uploadStatus === 'uploading'">
      上传进度：{{ uploadProgress }}%
    </div>
    <div v-if="uploadStatus === 'success'">
      上传成功：<a :href="uploadResult.filePath" target="_blank">{{ uploadResult.fileName }}</a>
    </div>
    <div v-if="uploadStatus === 'failed'">
      上传失败：{{ uploadError }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUpload } from 'file-upload-slice-vue';

const file = ref(null);
const chunkTotal = ref(0);

const {
  uploadStatus,
  uploadProgress,
  uploadResult,
  uploadError,
  uploadedChunks,
  initUpload,
  startUpload,
  pauseUpload,
  cancelUpload
} = useUpload({
  initUrl: 'http://localhost:3001/api/upload/init',
  uploadUrl: 'http://localhost:3001/api/upload/chunk',
  mergeUrl: 'http://localhost:3001/api/upload/merge',
  chunkSize: 2 * 1024 * 1024,
  concurrency: 3,
  strategy: 'concurrent'
});

const handleFileChange = async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;
  file.value = selectedFile;
  const initRes = await initUpload(selectedFile);
  chunkTotal.value = initRes.chunkTotal;
};
</script>

Vue2/Vue3 组件方式

<template>
  <div>
    <FileUploadSlice
      :init-url="'http://localhost:3001/api/upload/init'"
      :upload-url="'http://localhost:3001/api/upload/chunk'"
      :merge-url="'http://localhost:3001/api/upload/merge'"
      :chunk-size="2 * 1024 * 1024"
      :concurrency="3"
      strategy="concurrent"
      @success="handleSuccess"
      @failed="handleFailed"
    />
  </div>
</template>

<script>
import { FileUploadSlice } from 'file-upload-slice-vue';

export default {
  components: {
    FileUploadSlice
  },
  methods: {
    handleSuccess(data) {
      console.log('上传成功', data);
    },
    handleFailed(error) {
      console.error('上传失败', error);
    }
  }
};
</script>