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