在vue3项目中实现文件分片上传vue-simple-uploader

在Vue 3项目中使用vue-simple-uploader进行文件分片上传，首先需要安装该插件：

npm install vue-simple-uploader --save

然后在Vue组件中使用它：

<template>
  <uploader :options="options" @file-added="fileAdded">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload</p>
    </uploader-drop>
    <uploader-list></uploader-list>
    <uploader-btn>Click to upload</uploader-btn>
  </uploader>
</template>
 
<script>
import { Uploader, UploaderBtn, UploaderDrop, UploaderList, UploaderUnsupport } from 'vue-simple-uploader'
 
export default {
  components: {
    Uploader,
    UploaderBtn,
    UploaderDrop,
    UploaderList,
    UploaderUnsupport
  },
  data() {
    return {
      options: {
        target: 'YOUR_UPLOAD_URL', // 上传地址
        chunkSize: 1 * 1024 * 1024, // 分片大小，默认1MB
        testChunks: true, // 在上传前测试分片是否已存在
        // 其他配置项...
      }
    }
  },
  methods: {
    fileAdded(file) {
      file.upload(); // 触发上传
    }
  }
}
</script>

在上述代码中，<uploader>组件是核心组件，它接受一个options对象作为配置，其中指定了上传的目标URL以及分片大小。@file-added事件用于当文件添加到上传队列时执行一些逻辑，例如触发文件的上传。

请确保替换YOUR_UPLOAD_URL为实际的文件上传API地址。

这个例子提供了基本的使用方法，vue-simple-uploader还支持更多高级功能，如断点续传、分片上传完毕后的校验、并发上传数量控制等。你可以查看官方文档来了解更多详情。