断点上传（未完）

思路

• 对文件进行切片
• 将切片传输给服务器

<template>
  <div class="home">
    <input type="file" @change="handleFileChange"/>
    <el-button @click="handleUpload">上传</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
const LENGTH = 10;
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  data(){
    return{
      file: null,
      data:[]
    }
  },
  methods:{
    request(){

    },
    async handleFileChange(e, length = LENGTH){
      const [file] = e.target.files;
      if(!file) return;
      this.file = file;
    },
    // 生成文件切片
    createFileChunk(file, length = LENGTH){
      const fileChunkList = [];
      const chunkSize = Math.ceil(file.size / length);
      let cur = 0;
      while(cur < file.size){
        fileChunkList.push({file: file.slice(cur, cur + chunkSize)});
        cur += chunkSize;
      }
      return fileChunkList;
    },
    // 上传切片
    async uploadChunks(){
      const requestList = this.data
      .map(({chunk}) => {
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('hash',hash);
        formData.append('filename', this.file.name);
        return {formData}
      })
      .map(async({formData}) => {
        // ajax请求
        this.request({
            url:'http://localhost:8080/upload',
            data: formData
        })
      })
      await Promise.all(requestList); // 并发切片
    },

    async handleUpload(){
      if(!this.file) return;
      const fileChunkList  = this.createFileChunk(this.file);
      this.data = fileChunkList.map(({ file }, index)=>({
        chunk: file,
        hash: this.file.name + '-' + index // 文件名 + 数组下标
      }))
    }
  }
}
</script>

来源：CSDN

作者：qq_33332184

链接：https://blog.csdn.net/qq_33332184/article/details/103959500