Vue文件切片上传,file对象的slice使用方法

1. file对象介绍

size 表示二进制对象的大小

type 表示二进制对象的类型

slice 方法 分割文件

2. file.slice介绍

第一个参数startByte表示文件起始读取Byte字节

第二个参数则是结束读取字节

文件切片上传

// 文件切片大小定为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对象

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);
})
}