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

最新推荐文章于 2025-06-26 13:58:42 发布

原创

最新推荐文章于 2025-06-26 13:58:42 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

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

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

<template>
  <el-upload
    action="/https/blog.csdn.net/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