使用 blueimp jQuery-File-Upload 一次性恢复分块文件上传答案

【问题标题】：Resuming chunked file upload with blueimp jQuery-File-Upload uploads all at once使用 blueimp jQuery-File-Upload 一次性恢复分块文件上传
【发布时间】：2017-04-03 13:44:24
【问题描述】：

我正在尝试使用 angularJS 通过blueImp jQuery-File-Upload 实现文件上传。

文件上传应该支持分块上传，如果分块上传失败会自动恢复。

分块上传工作正常。我现在面临的问题是，当发生错误时，会调用自动恢复（chunkfail 方法）并重新启动上传调用，其余数据一次全部上传！自动恢复发生时不再发生分块。这是我基于example shown on github的代码：

.controller('MyFileUploadController', ['$scope','$http', 
    function ($scope, $http) {
        // setting upload properties:
        $scope.options = {
            url: myUploadUrl,
            maxChunkSize: 100*1024 //100kB,
            maxRetries: 100,
            retryTimeout: 500,
            chunkfail: function (e, data) {
                if (e.isDefaultPrevented()) {
                    return false;
                }
                var that = this,
                scope = data.scope;
                if (data.errorThrown === 'abort') {
                   scope.clear(data.files);
                   return;
                }
                var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'), 
                retries = data.retries || 0;

                var retry = function () {

                    var req = {
                        method: 'POST',
                        url: filecheckUrl,
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        data: {file: data.files[0].name}
                    };


                    $http( req ).success(function(respData, status, headers, config) {
                        data.uploadedBytes = respData && respData.size;
                        data.data = null;

                        data.submit();

                    }).error(function(respData, status, headers, config) {
                        fu._trigger('fail', e, data);
                    });

                    if (data.errorThrown !== 'abort' && data.uploadedBytes < data.files[0].size && retries < fu.options.maxRetries) {
                        retries += 1;
                        data.retries = retries;
                        window.setTimeout(retry, retries * fu.options.retryTimeout);
                        return;
                    }
                    data.retries = null;
                    $.blueimp.fileupload.prototype.options.fail.call(this, e, data);
                }
            };

让chunkfail 中的data.submit() 调用与下一个块而不是一次所有剩余块一起恢复上传，我缺少什么？

【问题讨论】：

我们最近有另一个复杂的 blueimp 查询，当通过电子邮件询问时，库 Sebastian 的作者在 SO 中回答了这个问题。您可以使用顶部链接blueimp.net 与他联系。向他发送一封带有此问题链接的礼貌电子邮件，并请他在此处发表评论。上一期已经困扰了相当多聪明的人一段时间了，答案很简单，只需来自 Seb 的一点点意见。

标签： jquery angularjs file-upload blueimp chunked

【解决方案1】：

我终于自己找到了原因：

检查调用的文件大小以字符串形式返回，但必须是数字。

改变这一行

data.uploadedBytes = respData && respData.size;

到

data.uploadedBytes = respData && Number(respData.size);

解决问题。

========

详细解释

为什么它会失败，data.uploadedBytes 的类型是字符串而不是数字：

在 bluimp 实现中的某个地方，下一个块的 File-Blob 切片计算如下：

slice.call(file,
    ub, // = data.uploadedBytes (chunk start byte pos)
    ub + mcs, // = data.uploadedBytes + data.maxChunkSize (chunk end byte pos)
    file.type
);

这会导致块结束位置

ub + mcs, // = data.uploadedBytes + data.maxChunkSize

变成像这样的串联字符串

102400 + 102400 // supposed to be 100kb + 100kb = 200kb

导致

102400102400 // about 95GB

大于上传文件的大小。

所以下一个块切片被计算为文件的所有剩余字节。

【讨论】：