Vue实现大文件分片上传，包括断点续传以及上传进度条

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <progress :value="progress" max="100"></progress>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024, // 每个分片的大小，这里设置为1MB
      chunks: [], // 存储分片的数组
      progress: 0, // 上传进度
    };
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      this.file = file;
      this.createChunks(file);
      this.uploadChunks();
    },
    createChunks(file) {
      const chunkCount = Math.ceil(file.size / this.chunkSize);
      for (let i = 0; i < chunkCount; i++) {
        const chunk = file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
        this.chunks.push(chunk);
      }
    },
    uploadChunks() {
      const chunk = this.chunks.shift();
      if (chunk) {
        this.uploadChunk(chunk, () => {
          this.progress = parseInt((1 - this.chunks.length / this.chunkCount) * 100);
          this.uploadChunks();
        });
      }
    },
    uploadChunk(chunk, callback) {
      // 这里应该是你实际的文件分片上传逻辑，例如使用AJAX或者其他方式上传
      // 上传成功后，调用callback继续上传剩余分片
      // 模拟上传操作
      setTimeout(() => {
        callback();
      }, 1000);
    },
  },
};
</script>

这个例子展示了如何在Vue中实现文件的分片上传，包括创建分片、上传分片以及使用进度条跟踪上传进度。这个例子使用了文件API的slice方法来分割文件，并且使用递归上传方式来保证上传顺序。在实际应用中，你需要替换uploadChunk方法中的模拟上传逻辑，以实现真正的文件分片上传。