大文件上传

1、项目中使用大文件上传时，往往会造成上传速度慢，影响用户体验

2、想文件切片，将文件大小切割成多个片段，依次上传

3、代码展示

<template>
    <input type="file" @change="change">
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        const change = async(e: Event) => {
            const target = e.target as HTMLInputElement;
            const chunkSize = 2 * 1024 *1024 // 以2M为例
            if(target.files) {
               const file = target.files[0]
               const {type, name, size} = file
               let start = 0; // 文件切割大小
               let index = 0;
               while (start < size) {
                 let blob = null as any;
                 if (start + chunkSize > size) {
                    blob = file.slice(start, size);
                 }else {
                    blob = file.slice(start, start + chunkSize);
                 }
                 start += chunkSize
                 console.log(blob)
                 let blobFile = new File([blob], name)
                 let formData = new FormData()
                 formData.append('file', blobFile)
                 formData.append('index', index+ '')
                 console.log(formData.getAll('name'))
               }
            }
        };
        return {
            change
        }
    },
})
</script>