vue 大文件视频切片上传处理方法

前端上传大文件、视频的时候会出现超时、过大、很慢等情况，为了解决这一问题，跟后端配合做了一个切片的功能。

我这个切片功能是基于 minion 的，后端会把文件放在minion服务器上。具体看后端怎么做

1、在项目的 util(这个文件夹是自己创建的，如果项目里没有可以自行创建) 文件家中创建一个js文件 upload.js   在js文件中添加如下代码：

import axios from 'axios';
import md5 from 'js-md5' //引入MD5加密
export const uploadByPieces = ({ urlList, file, pieceSize, progress, beforeSuccess, success, error }) => {
    // 如果文件传入为空直接 return 返回
    if (!file) return
    let fileMD5 = ''// 总文件列表
    const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
    const chunkCount = Math.ceil(file.size / chunkSize - 1) // 总片数
    // 获取md5
    const readFileMD5 = () => {
        // 读取视频文件的md5
        // console.log("获取文件的MD5值")
        let fileRederInstance = new FileReader()
        // console.log('file', file)
        fileRederInstance.readAsBinaryString(file)
        fileRederInstance.addEventListener('load', e => {
        let fileBolb = e.target.result
        fileMD5 = md5(fileBolb)
        // console.log('fileMD5', fileMD5)
        // console.log("文件未被上传，将分片上传")
        readChunkMD5()

        })
    }
    const getChunkInfo = (file, currentChunk, chunkSize) => {
        let start = currentChunk * chunkSize
        let end = Math.min(file.size, start + chunkSize)
        let chunk = file.slice(start, end)
        return { start, end, chunk }
    }
    // 针对每个文件进行chunk处理
    const readChunkMD5 = () => {
        // 针对单个文件进行chunk上传
        for (var i = 0; i < chunkCount; i++) {
            const { chunk } = getChunkInfo(file, i, chunkSize)
            // console.log("切片地址123" + urlList)
            // console.log("总片数" + chunkCount)
            // console.log("分片后的数据---测试：" + i)
            // console.log(chunk)
            let fileUrl = urlList[i];
            // console.log(fileUrl,'地址');
            uploadChunk({ chunk, currentChunk: i, chunkCount, fileUrl })
        }
    }
    const uploadChunk = (chunkInfo) => {
        // 上传请求方式1 (根据自身情况自行选择)
        // console.log(chunkInfo.chunk,'chunkInfochunkInfo');
        let files = chunkInfo.chunk
        axios.put(chunkInfo.fileUrl,files).then((res) => {
            // console.log("分片上传返回信息："+ res)
            if (res.status == 200) {
                // 下面如果在项目中没有用到可以不用打开注释
                if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
                    beforeSuccess()
                } else {
                    // 当总数大于等于分片个数的时候
                    if ((chunkInfo.currentChunk + 1) == chunkInfo.chunkCount) {
                        // console.log("文件开始------合并成功")
                        success(res.data[0])
                    }
                }
            }
        }).catch((e) => {
            console.log('失败！');
            error && error(e)
        })
    }
    readFileMD5() // 开始执行代码
}

js-md5 如果没有的话需要自己在项目里安装：

npm install js-md5

2、创建一个上传视频文件的公共组件，便于不同地方引用，如下：

具体根据自己的实际情况进行修改即可！

至此完成！！！

测试有效！！！感谢支持！！！