Question

我正在尝试使用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);
                }
            };

在data.submit() chunkfail调用init()来恢复上传下一个块而不是一次剩下的所有内容时，我错过了什么？

Answer 1

我终于找到了原因：

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

更改此行

data.uploadedBytes = respData && respData.size;

到

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

解决了这个问题。

======

详细说明

为什么它失败，data.uploadedBytes的类型为String而不是Number：

在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

大于上传文件的大小。

因此，下一个块片计算为文件的所有剩余字节。

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

1 个答案: