一、WebUploader分片上传丢失文件
在进行WebUploader分片上传时，有时会遇到文件上传一部分后突然中断或者浏览器崩溃等异常情况，可能导致后续上传的分片丢失，这时需要进行一些处理。
WebUploader提供了一个autoRetry属性，用于设置上传出错时是否自动重试，默认为 false。如果我们将它设置为 true，WebUploader 就会在上传失败后自动重试，以此确保文件上传成功。
var uploader = WebUploader.create({
// ...
autoRetry: true
});
此外，WebUploader还提供了一些其他的措施来应对文件上传失败的情况，比如加强异常处理、调整分块大小等。
二、WebUploader上传文件夹
WebUploader默认只支持上传单个文件，但是我们有时候需要上传整个文件夹或者多个文件，怎么办呢？
事实上，WebUploader提供了一个directory属性，用于指定上传文件夹的路径，支持将文件夹中所有文件同时上传。
var uploader = WebUploader.create({
// ...
directory: true
});
需要注意的是，因为上传文件夹会涉及到文件夹中的多个文件的同时上传，这可能会拖慢整个上传过程，因此建议在上传大量文件时采用分片上传。
三、WebUploader断点续传
在网络不稳定或文件较大的情况下，WebUploader分片上传可能会出现上传失败的情况。为了避免用户重新上传整个文件，我们需要提供断点续传的功能。
首先，需要在上传前检测文件是否已经存在，以及文件上传进度，以此决定从哪个分片开始上传。
var uploader = WebUploader.create({
// ...
chunks: 10,
chunkSize: 5 * 1024 * 1024
});
// 文件上传前的事件监听
uploader.on('uploadBeforeSend', function (block, data) {
var file = block.file;
// 检查文件是否已经上传
if (file.blocksSent && file.blocksSent[block.chunk]) {
// 如果文件已经上传，跳过该分片
uploader.skipFile(file);
} else {
// 设置上传分片的起点
data.startPos = block.chunk * uploader.options.chunkSize;
}
});
// 文件上传进度的事件监听
uploader.on('uploadProgress', function (file, percentage) {
// 记录文件上传进度
file.blocksSent = file.blocksSent || [];
file.blocksSent[Math.floor(percentage * uploader.options.chunks)] = true;
});
同时，在文件上传成功后，还需要根据文件的标识符保存上传成功的分片，以便后续文件恢复时能够正确地继续上传。
// 文件上传成功后的事件监听
uploader.on('uploadSuccess', function (file, response) {
var chunks = file.chunks || [];
chunks.push(response.chunk);
file.chunks = chunks;
});
通过以上实现，我们就可以实现WebUploader的断点续传功能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270794.html
微信扫一扫 
支付宝扫一扫 