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

1. file对象介绍

size 表示二进制对象的大小

type 表示二进制对象的类型

slice 方法 分割文件

2. file.slice介绍

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

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

文件切片上传

// 文件切片大小定为1MB

1 2 3 4 5 6 7

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方法，文件分片的核心方法

1	const chunk = file.slice(startBytes, endBytes);

3.定义form对象

1 2 3 4 5 6

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表单请求方法

1	postForm('url', params).then((res) => {

// 根据后端返回是否完成

1 2 3 4 5 6

if (true) { return res; } // 递归上传 this._uploadBig(file, ++idx); })

5.全部代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/** * @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); }) }