我想写个vue3 切片上传组件

好的，以下是一个简单的Vue 3切片上传组件的代码示例：

<template>
  <div>
    <input type="file" @change="selectFile">
    <button @click="upload">Upload</button>
    <progress :value="progress" max="100"></progress>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      progress: 0,
      chunkSize: 1024 * 1024, // 1MB
    };
  },
  methods: {
    selectFile(event) {
      this.file = event.target.files[0];
    },
    async upload() {
      const totalChunks = Math.ceil(this.file.size / this.chunkSize);
      let uploadedChunks = 0;
      let fileReader = new FileReader();
      let chunkIndex = 0;

      fileReader.onload = async () => {
        try {
          const chunkData = new FormData();
          chunkData.append('chunk', fileReader.result);
          chunkData.append('filename', this.file.name);
          chunkData.append('chunkIndex', chunkIndex);
          chunkData.append('totalChunks', totalChunks);

          await axios.post('/api/upload', chunkData);
          uploadedChunks++;
          this.progress = Math.floor((uploadedChunks / totalChunks) * 100);

          if (uploadedChunks < totalChunks) {
            chunkIndex++;
            readNextChunk();
          } else {
            console.log('Upload complete!');
          }
        } catch (error) {
          console.error(error);
        }
      };

      const readNextChunk = () => {
        const start = chunkIndex * this.chunkSize;
        const end = Math.min(start + this.chunkSize, this.file.size);
        fileReader.readAsArrayBuffer(this.file.slice(start, end));
      };

      readNextChunk();
    },
  },
};
</script>

这个组件的实现思路是将文件分成若干个固定大小的切片，然后逐个上传。在每个切片上传成功后，我们更新进度条并继续上传下一个切片，直到所有切片都上传完成。

注意，这个示例中的上传接口地址是 `/api/upload`，需要根据实际情况进行修改。此外，由于这个示例中的切片大小为1MB，如果需要上传更大的文件，可以将`chunkSize`变量的值调大。