前端实现大文件分片上传（切片上传）

实现方式：

1、将文件切分为固定大小的块（通常为几MB），使用File API中的slice方法来进行切片。

2、给每个分片设定唯一的标识符

3、分片逐个上传。

upFile (data) {
    let { file } = data
    let maxSize =  20 * 1024 *1024
    if (file.size > maxSize) {
        let shardCount = Math.ceil(file.size / maxSize)
        let md5 = this.guid()

        for(let i = 0; i < shardCount; i++) {
            let form = new FormData()

            // 唯一id
            form.append('fileMd5', md5)
            // 文件名
            form.append('fileName', file.name)
            // 总大小
            form.append('fileSize', file.size)
            // 每一片的大小
            form.append('size', maxSize)
            // 总片数
            form.append('chunkTotal', shardCount)
            // 计算每一片的起始与结束位置
            let start = i * maxSize
            let end = Math.min(file.size, start + maxSize)
            // slice方法用于切出文件的一部分
            form.append('file', file.slice(start, end))
            // 当前是第几片
            form.append('chunk', i)
            // 上传来源
            form.append('fileResource', 4)
            // 每个分片的MD值
            form.append('chunkMd5', this.guid())
            // 大文件上传接口
            this.bigUpload(form)
        }
    } else {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('fileName', file.name)
        formData.append('fileResource', 4)
        formData.append('fileSize', file.size)
        this.$api.dataReport.uploadFile(formData ).then((res)=>{
            if(res.code==='000000'){
                //上传成功!
            }
        })
    }
},
bigUpload (form) {
    this.$api.dataReport.uploadBigFile(form).then((res)=>{
        if(res.code==='000000'){
            //上传成功!
        }
    })
},
guid () {
     return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16 | 0,v = c === 'x' ? r : r & 0x3 | 0x8
         return v.toString(32)
     })
}