Vue3 切片上传组件

Vue3 切片上传组件是一个基于 Vue3 开发的组件，用于实现大文件的切片上传，可提高上传速度和稳定性。

该组件主要包含以下功能：

1. 支持文件切片上传；
2. 支持上传进度显示；
3. 支持上传暂停和继续；
4. 支持上传失败重试；
5. 支持上传完成后的回调函数。

使用该组件可以方便地实现大文件的上传，提高用户体验和操作效率。

以下是该组件的部分代码示例：

<template>
  <div>
    <div class="file-input">
      <input type="file" @change="handleFileChange">
    </div>
    <div class="file-info">
      <p>文件名：{{ file.name }}</p>
      <p>文件大小：{{ formatFileSize(file.size) }}</p>
    </div>
    <div class="file-progress">
      <p>上传进度：{{ Math.floor(progress * 100) }}%</p>
      <div class="progress-bar" :style="{ width: (progress * 100) + '%' }"></div>
    </div>
    <div class="file-actions">
      <button v-if="!isUploading" @click="startUpload">开始上传</button>
      <button v-if="isUploading" @click="pauseUpload">暂停上传</button>
      <button v-if="!isUploading && progress > 0" @click="resumeUpload">继续上传</button>
      <button v-if="isPaused || progress === 0" @click="retryUpload">重新上传</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import SliceUploader from 'slice-uploader';

export default defineComponent({
  name: 'SliceUploaderDemo',
  components: { SliceUploader },
  setup() {
    const file = ref(null);
    const progress = ref(0);
    const isUploading = ref(false);
    const uploader = new SliceUploader({
      url: 'http://localhost:3000/upload',
      headers: {
        Authorization: 'Bearer xxxxxxxxxxxxxxx',
      },
      onProgress: (p) => {
        progress.value = p;
      },
      onSuccess: (res) => {
        console.log(res);
      },
      onError: (err) => {
        console.error(err);
      },
    });

    const handleFileChange = (event) => {
      file.value = event.target.files[0];
    };

    const startUpload = () => {
      if (!file.value) {
        alert('请选择要上传的文件');
        return;
      }
      uploader.upload(file.value);
      isUploading.value = true;
    };

    const pauseUpload = () => {
      uploader.pause();
      isUploading.value = false;
    };

    const resumeUpload = () => {
      uploader.resume();
      isUploading.value = true;
    };

    const retryUpload = () => {
      uploader.retry();
      isUploading.value = true;
    };

    const formatFileSize = (size) => {
      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
      let i = 0;
      while (size >= 1024 && i < units.length - 1) {
        size /= 1024;
        i++;
      }
      return `${size.toFixed(2)} ${units[i]}`;
    };

    return {
      file,
      progress,
      isUploading,
      handleFileChange,
      startUpload,
      pauseUpload,
      resumeUpload,
      retryUpload,
      formatFileSize,
    };
  },
});
</script>

以上是一个简单的切片上传组件示例，其中包含了文件选择、上传进度显示、上传暂停和继续、上传失败重试等功能。开发者可以根据自己的需求进行定制和扩展。