Vue-文件切片上传

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

在vue中，实现文件分片上传，分片上传的思路是，拿到文件后，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件全部片段上传完毕。

一：file对象的slice方法

1. file对象属性

1. size 表示二进制对象的大小
2. type 表示二进制对象的类型
3. slice 方法 分割文件

2. file.slice（startByte,endByte）

1. 第一个参数startByte表示文件起始读取Byte字节
2. 第二个参数则是结束读取字节

二：文件上传

1.文件切片定义

// 文件切片大小定为1MB
    let idx = 1;
    const bytesPerPiece = 1 * 1024 * 1024;
    let startBytes = idx * bytesPerPiece;
    let endBytes = startBytes + bytesPerPiece;
    if (endBytes > file.size) {
        endBytes = file.size;
    }

2.切割文件

// 切割文件，file对象的slice方法，文件分片的核心方法
    const chunk = file.slice(startBytes, endBytes);

3.定义form对象

// 定义form对象
    let params = new FormData();
    params.set("chunk", idx);
    params.set("chunks", totalPieces);
    params.set("size", file.size);
    params.set("name", file.name);
    params.set("plupload", chunk);

4.请求后台

// post请求 postForm 为自定义的form表单请求方法
    postForm('url', params).then((res) => {
        // 根据后端返回是否完成
        if (true) {
            return res;
        }
        // 递归上传
        this._uploadBig(file, ++idx);
    })

5.全部代码

/**
 * @param {Object} file 文件
 * @param {Number} idx 当前分片
 * @return {Object}
 */
uploadBig(file, idx) {
    // 文件切片大小定为1MB
    const bytesPerPiece = 1 * 1024 * 1024;
    let startBytes = idx * bytesPerPiece;
    let endBytes = startBytes + bytesPerPiece;
    if (endBytes > file.size) {
        endBytes = file.size;
    }
    const totalPieces = Math.ceil(file.size / bytesPerPiece)
    // 全部上传完毕后退出
    if(startBytes >= file.size) { 
        return false;
    }
    // 切割文件，file对象的slice方法，文件分片的核心方法
    const chunk = file.slice(startBytes, endBytes);
    // 定义form对象
    let params = new FormData();
    params.set("chunk", idx);
    params.set("chunks", totalPieces);
    params.set("size", file.size);
    params.set("name", file.name);
    params.set("plupload", chunk);
    // post请求 postForm 为自定义的form表单请求方法
    postForm('url', params).then((res) => {
        // 根据后端返回是否完成
        if (true) {
            return res;
        }
        // 递归上传
        this._uploadBig(file, ++idx);
    })
}

以上就是文件分片上传的全部代码了，记录一下，温故而知新！