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的斷點續傳功能。