1. file对象介绍欢迎!我白天是个邮递员,晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都,有条叫做Jack的狗。
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) {// 文件切片大小定为1MBconst 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);})}
