如果 ajax 失败，Dropzone.js 会重试

Question

我正在使用 dropzone.js 将某些文件上传到我的服务器。我遇到的问题是，有时服务器无法跟上连接并拒绝某些上传，因此它们会失败并用 x 标记为红色。我想在一段时间后自动重试，或者至少让用户能够手动重新启动它。

dropzone.js 中是否有实现的功能，一种足够简单的方法来为我自己实现它，或者是否有更好的工具来通过拖放、预览、ajax 等进行上传......？

Answer 1

需要对 dropzone.js 进行一个小修改才能使事情看起来更漂亮，但除此之外它只是一个指令。
我的拖放区现在会重试（无限次，但我稍后会修复该问题），直到成功为止。需要做更多的工作来重置进度条，但这应该足以让您到达某个地方（如果您仍然关心这一点）。

对 dropzone.js 的编辑是（在美化版本中）：

                    success: function(file) {
                    file.previewElement.classList.remove("dz-error");
                    return file.previewElement.classList.add("dz-success");
                }

我在其中添加了删除行。当文件成功上传时，这会将 X 更改为勾号。
角度指令如下：

.directive('dropZone', function($rootScope) {
        return function ($scope, element, attr) {
            var myDropZone = element.dropzone({
                url: "api/ImageUpload",
                maxFilesize: 100,
                paramName: "uploadfile",
                maxThumbnailFilesize: 5,
                autoProcessQueue: false,
                parallelUploads: 99999,
                uploadMultiple: false,
                // this is my identifier so my backend can index the images together
                params: {identifier: $scope.identifier},
                // I seem to need to do this when a file is added, otherwise it doesn't update
                init: function(){this.on("addedfile", function(file){$rootScope.$digest();})}
            });
            // grabbing the dropzone object and putting it somewhere the controller can reach it
            $scope.dropZone = myDropZone.context.dropzone;
            // what we use to work out if we're _really_ complete
            $scope.errors = [];
            // here is our retry mechanism
            myDropZone.context.dropzone.addEventListener("error", function(file,errorMessage,xhr)
            {
                // log our failure so we don't accidentally complete
                $scope.errors.push(file.name);
                // retry!
                myDropZone.context.dropzone.uploadFile(file);
            });
            myDropZone.context.dropzone.addEventListener("success", function(file,errorMessage,xhr)
            {
               // remove from the error list once "success" (_not_ "complete")          
               $scope.errors.splice($scope.errors.indexOf(file.name), 1);
            });
             // this gets called multiple times because of our "retry"  
            myDropZone.context.dropzone.addEventListener("queuecomplete", function()
            {
                 // if we're here AND have no errors we're done
                if($scope.errors.length == 0)
                {
                      // this is my callback to the controller to state we're all done
                    $scope.uploadComplete();
                }
            });
        };
    })

不确定所有 myDropZone.context.dropZone 的东西是否是必要的，我对 javascript 有点烂，花了很多时间 console.logging() 对象并在调试器中检查它们。这是我找到 dropzone 组件的地方，也许有更简单的方法？