vue3+vue-simple-uploader实现大文件上传

你可以使用 vue-simple-uploader 插件来实现 Vue3 中的大文件上传功能。下面是一个简单的示例代码：

首先，安装 vue-simple-uploader 插件：

npm install vue-simple-uploader --save

然后，在需要使用上传功能的组件中引入插件并配置：

import Vue from 'vue';
import VueSimpleUploader from 'vue-simple-uploader';

Vue.use(VueSimpleUploader, {
  chunkSize: 1024 * 1024, // 设置分片大小，默认为1MB
  concurrentUploads: 3, // 设置并发上传数，默认为3
  retryCount: 3, // 设置上传重试次数，默认为0
});

export default {
  // ...
}

接下来，你可以在组件中使用 `<vue-simple-uploader>` 标签来实现大文件上传：

<template>
  <div>
    <vue-simple-uploader
      ref="uploader"
      :url="uploadUrl"
      @file-added="handleFileAdded"
      @file-progress="handleFileProgress"
      @file-success="handleFileSuccess"
      @file-error="handleFileError"
      @upload-started="handleUploadStarted"
      @upload-completed="handleUploadCompleted"
    >
      <button @click="startUpload">开始上传</button>
    </vue-simple-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://your-upload-url', // 设置上传接口地址
    };
  },
  methods: {
    handleFileAdded(file) {
      console.log('文件添加成功:', file);
    },
    handleFileProgress(file, progress) {
      console.log('上传进度:', progress);
    },
    handleFileSuccess(file, response) {
      console.log('上传成功:', response);
    },
    handleFileError(file, error) {
      console.log('上传失败:', error);
    },
    handleUploadStarted() {
      console.log('上传开始');
    },
    handleUploadCompleted() {
      console.log('上传完成');
    },
    startUpload() {
      this.$refs.uploader.upload(); // 调用上传方法
    },
  },
};
</script>

以上代码是一个简单的大文件上传示例，你可以根据需要自定义处理文件上传的各个事件。参考文档和示例代码以便更好地理解和使用 vue-simple-uploader 插件：https://github.com/simple-uploader/vue-simple-uploader