vue + elementPlus 分片上传大视频文件

在Vue和Element Plus中分片上传大视频文件涉及将大文件切分成小块（分片），然后逐个上传到服务器。Element Plus的<el-upload>组件提供了上传文件的基本功能，但对于分片上传，我们需要自己处理逻辑。

以下是一个使用Vue 3和Element Plus实现分片上传大视频文件的简单示例：

<template>
  <el-upload
    action="/your/uploadUrl"
    :on-change="handleFileChange"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    multiple
  >
    <el-button size="small" type="primary">选择视频文件</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const fileList = ref([]);
    const chunkSize = 1024 * 1024; // 1MB per chunk
    const currentChunk = ref(0);
    const totalChunks = ref(0);
    const currentFile = ref(null);
    const loading = ref(false);
    const isShow = ref(true);

    const handleFileChange = async (file, fileList) => {
      console.log('file', file)
      // 判断是否是video类型
      if (file?.raw?.type.startsWith('video/')) {
        currentFile.value = file.raw;
        totalChunks.value = Math.ceil(currentFile.value.size / chunkSize);
        currentChunk.value = 0;

        if (totalChunks.value > 0) {
          await uploadChunk(currentFile.value, currentChunk.value);
        }
      } else {
        alert('请选择一个视频文件！');
      }
    };

    const beforeUpload = (file) => {
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.error('上传文件大小不能超过 100MB！');
        return false;
      }
      return true;
    };

    const createChunk = (file, index) => {
      const start = index * chunkSize;
      const end = Math.min(file.size, start + chunkSize);
      const chunk = file.slice(start, end);
      return chunk;
    };

    const uploadChunk = async (file, index) => {
      const formData = new FormData();
      const chunk = createChunk(file, index);
      formData.append('file', chunk);
      formData.append('chunk', index);
      formData.append('chunks', totalChunks.value);
      formData.append('name', file.name);

      try {
        const response = await axios.post('/your/uploadUrl', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        if (response.data.success) {
          currentChunk.value++;
          if (currentChunk.value < totalChunks.value) {
            await uploadChunk(file, currentChunk.value);
          } else {
            // 所有分片上传完成后的处理
            console.log('文件上传成功');
          }
        } else {
          console.error('文件分片上传失败');
        }
      } catch (error) {
        console.error('文件分片上传发生错误', error);
      }
    };

    const close = () => {
      this.isShow = false
    };

    return {
      close,
      isShow,
      loading,
      fileList,
      handleFileChange,
      beforeUpload
    };
  }
};
</script>

在上面的代码中，我们创建了一个<el-upload>组件，并绑定了handleFileChange和beforeUpload两个方法。beforeUpload方法用于检查文件大小和类型，确保它是视频文件且大小不超过500MB。handleFileChange方法则用于处理文件变化事件，包括计算分片数量，并开始上传第一个分片。

createChunk函数用于根据给定的索引创建文件分片。uploadChunk函数负责上传一个特定的分片，并在上传成功后递归调用自身以继续上传下一个分片，直到所有分片都上传完成。

你需要根据你的服务器端API来调整/your/uploadUrl，并确保服务器端能够处理分片上传的逻辑，包括接收分片、合并分片以及处理可能的并发上传和断点续传。

此外，你可能还需要添加额外的逻辑来处理上传进度、错误处理、取消等。