大文件分片上传demo，前端基于Uppy，

实现分片上传并且支持断点续传需要基于Tus

Tus 是一种开放协议，用于基于 HTTP 构建的可恢复上传。这意味着 意外关闭选项卡或失去连接，让您继续，对于 实例，您的 10GB 上传，而不是重新开始。

后端

后端变化挺大的，你需要将你的服务器变得支持Tus，刚好官方提供了对应的插件（Java后台、php后台可以自行百度如何集成）

插件官方文档
https://github.com/tus/tus-node-server

官方集成案例，这个很重要，会介绍插件的属性、事件等
https://github.com/tus/tus-node-server/tree/main/packages/server
————————————————

本文引用了无知的小菜鸡博主的原创文章，

原文链接：https://blog.csdn.net/weixin_41897680/article/details/132617289

以下是前端示例代码：

<template>
  <div class="upload-container">
    <div id="drag-drop-area">
      <!-- 默认样式，也可以在里面进行自定义 -->
    </div>
    <div id="status-bar"></div>
    <br />
    <el-button type="primary" @click="pauseOrResume">{{ isUploadding ? '暂停' : '开始' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessage } from 'element-plus'

import Uppy from '@uppy/core';
import DragDrop from '@uppy/drag-drop';
import StatusBar from '@uppy/status-bar';
import Tus from '@uppy/tus';

//引入样式
import '@uppy/core/dist/style.min.css';
import '@uppy/drag-drop/dist/style.min.css';

// 1mb大小
const ONE_MB = 1024 * 1024;
// 是否正在上传，默认在上传
const isUploadding = ref(true)


let uppy: Uppy;

onMounted(() => {
  uppy = new Uppy({
    debug: true,  // 允许拖拽
    autoProceed: false, // 是否自动上传
    restrictions: {
      maxFileSize: 300 * ONE_MB, // 设置最大文件大小
      maxNumberOfFiles: 5, // 设置最大上传文件数量
      allowedFileTypes: ['.jpg', '.jpeg', '.png', '.zip'] // 设置允许的文件类型
    },
  })
    .use(DragDrop, { target: '#drag-drop-area', note: '拖放或点击' }) // 启用拖动
    .use(StatusBar, { target: '#status-bar' })   //启用进度条
    .use(Tus, {
      endpoint: 'http://127.0.0.1:5000/files', // 设置上传文件的API接口
      limit: 5, // 限制同时进行的上传数量，默认值20，不要没有限制或者过大
      chunkSize: 5 * ONE_MB // 设置分片的大小
    });

  // 监听文件上传
  uppy.on('complete', (result: any) => {
    // result是一个对象，属性是：
    // 会返回failed（Array)，因为可以多文件上传会返回一个数组
    // successful（Array)，因为可以多文件上传会返回一个数组，包含文件上传成功的信息
    console.log("上传完成：",result)
    if (Array.isArray(result.failed) && result.failed.length>0) {
      ElMessage.error(`文件上传失败，${result.failed}`)
    } else {
      ElMessage.success(`文件上传成功`)
    }

  })
})

// 暂停与恢复
const pauseOrResume = () => {
  if (isUploadding.value) {
    // 正在上传
    uppy.pauseAll()
  } else {
    // 暂停中
    uppy.resumeAll()
  }
  isUploadding.value = !isUploadding.value
}


</script>

<style scoped>
.upload-container {
  width: 300px;
  margin: 100px auto;
  height: 700px;
}
</style>