WebUploader分片上传

一、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的断点续传功能。