vue3 分片上传代码

以下是一个基于 vue3 和 axios 实现的分片上传的代码示例：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange">
    <button @click="onUpload">上传</button>
    <div v-if="uploading">
      <div>上传中: {{ currentChunk }} / {{ totalChunks }}</div>
      <div>上传进度: {{ Math.floor((currentChunk / totalChunks) * 100) }}%</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploading: false,
      currentChunk: 0,
      totalChunks: 0,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async onUpload() {
      if (!this.file) {
        return;
      }
      this.uploading = true;
      const chunkSize = 1024 * 1024; // 1MB
      const totalSize = this.file.size;
      const totalChunks = Math.ceil(totalSize / chunkSize);
      this.totalChunks = totalChunks;
      let currentChunk = 0;
      const fileReader = new FileReader();
      fileReader.onload = async () => {
        const { data } = await axios.post('/upload', {
          name: this.file.name,
          size: totalSize,
          chunkIndex: currentChunk,
          totalChunks: totalChunks,
          chunkData: fileReader.result,
        });
        currentChunk++;
        if (currentChunk < totalChunks) {
          loadNextChunk();
        } else {
          this.uploading = false;
          console.log('上传完成:', data);
        }
      };
      const loadNextChunk = () => {
        const start = currentChunk * chunkSize;
        const end = Math.min(start + chunkSize, totalSize);
        fileReader.readAsArrayBuffer(this.file.slice(start, end));
        this.currentChunk = currentChunk;
      };
      loadNextChunk();
    },
  },
};
</script>

这个示例中，通过监听文件选择按钮的 change 事件，获取选择的文件，并将文件分割成若干个分片。在上传按钮的 click 事件中，循环上传分片，上传时需要携带当前分片的索引和总分片数，以便后台进行分片合并。同时也设置了上传进度条，以便用户了解上传进度。