vue3+vite使用Vue-Simple-Uploader实现上传文件断点续传以及进度

要实现上传文件的断点续传和进度显示，可以使用Vue-Simple-Uploader这个插件。下面是一个使用Vue-Simple-Uploader实现上传文件断点续传和进度显示的示例：

首先，安装Vue-Simple-Uploader插件：

npm install vue-simple-uploader --save

然后，在Vue组件中引入和使用Vue-Simple-Uploader插件：

<template>
  <div>
    <vue-simple-uploader
      ref="uploader"
      :multiple="false"
      :auto-upload="false"
      :chunk-size="chunkSize"
      :upload-url="uploadUrl"
      :headers="headers"
      :params="params"
      :with-credentials="withCredentials"
      @progress="onProgress"
      @chunk-success="onChunkSuccess"
      @success="onSuccess"
      @error="onError"
    >
      <button @click="uploadFile">上传文件</button>
    </vue-simple-uploader>
  </div>
</template>

<script>
import VueSimpleUploader from 'vue-simple-uploader';

export default {
  components: {
    VueSimpleUploader,
  },
  data() {
    return {
      chunkSize: 1024 * 1024, // 每个分片的大小
      uploadUrl: '/upload', // 上传地址
      headers: {}, // 请求头
      params: {}, // 请求参数
      withCredentials: false, // 发送跨域请求时是否携带cookie
    };
  },
  methods: {
    // 上传文件
    uploadFile() {
      this.$refs.uploader.upload();
    },
    // 上传进度
    onProgress(progress) {
      console.log(`上传进度：${progress}%`);
    },
    // 分片上传成功
    onChunkSuccess(chunkResponse, chunkUploadParams, successChunks, totalChunks) {
      console.log(`分片上传成功：${chunkResponse}`);
    },
    // 上传成功
    onSuccess(response, file, fileList) {
      console.log(`上传成功：${response}`);
    },
    // 上传失败
    onError(error, file, fileList) {
      console.log(`上传失败：${error}`);
    },
  },
};
</script>

在上面的示例中，我们通过设置Vue-Simple-Uploader的props来实现上传文件的一些配置，如每个分片的大小、上传地址、请求头、请求参数等。然后，我们通过调用`this.$refs.uploader.upload()`方法来触发文件上传。在上传过程中，Vue-Simple-Uploader会触发一些事件，如上传进度、分片上传成功、上传成功、上传失败等，我们可以通过监听这些事件来实现断点续传和进度显示的功能。

其中，`@progress`事件会在上传过程中定时触发，可以用来显示上传进度；`@chunk-success`事件会在每个分片上传成功后触发，可以用来记录已经上传的分片；`@success`事件会在文件上传成功后触发，可以用来处理上传成功后的逻辑；`@error`事件会在上传失败后触发，可以用来处理上传失败后的逻辑。

需要注意的是，为了实现断点续传功能，我们需要在后端实现接收分片、合并分片等功能。具体实现方式可以参考Vue-Simple-Uploader的文档。