vue简单实现大文件上传

直接上代码！！

<script >
import axios from 'axios';
import { ref } from 'vue-demi';

export default {
  setup() {
    const percent=ref(0)
    const change = async(e) => {
      // 设置分流大小
      let chunkSize = 10 * 1024 * 1024; //10 M
      const target = e.target;
      //开始的偏移量
      let start = 0;
      //一共切了多少片
      let index = 0;
      //判断是否为空 如果不判断用ts时会报错
      if (target.files) {
        const file = target.files[0];
        // 获取文件的信息 结构出文件的名字、大小和格式
        const { name, size, type } = file;
        //如果开始的偏移量小于文件大小
        while (start < size) {
          let blob = null;
          // 判断如果超出切片就取整个数据
          if (start + chunkSize > size) {
            blob = file.slice(start, size);
          } else {
            blob = file.slice(start, start + chunkSize);
          }
          // 每次累加切片
          start+=chunkSize
          // 创建文件（每个切完片的单个数据）
          let blobFile=new File([blob],name)
          //创建FormData用来上传文件
          let formData=new FormData()
          //传递的数据
          formData.append('file',blobFile)
          //添加对应的编号
          formData.append('index',index+'')
          await axios.post('http://127.0.0.1:8000/api/uplodefile/',formData)
          index++;
          percent.value=(start/size)*100;
        }
        // axios.get('合并接口？dor'+md5(name))
        percent.value=100;
      }
    };

    return {
      change,
    };
  },
};
</script>