Question

嘿我试图对https://github.com/leon/angular-upload进行扩展我需要在上传之前做一些客户端验证（对文件进行初步检查，以便确保图片的大小+宽度+高度符合我的要求。

但是当我将选项发送到方法时，我的controller.scope.UploadTest（选项）中的选项将保持未定义

指令中的新代码：

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload',
    function(upload) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',//added this to test for upload
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
                el.append(fileInput);
                fileInput.on('change', function uploadButtonFileInputChange() {
                    if (fileInput[0].files && fileInput[0].files.length === 0) {
                        return;
                    }
                    var options = {
                        url: scope.url,
                        method: scope.method || 'POST',
                        forceIFrameUpload: scope.$eval(attr.forceIframeUpload) || false,
                        data: scope.data || {}
                    };
                    options.data[scope.param || 'file'] = fileInput;
                    scope.$apply(function() {
                        scope.onUpload({files: fileInput[0].files});
                    });
                    var uploadTest = true; //make true if function not exists

                    if (typeof scope.onUploadTest === "function") {
                        var functionCheck = scope.onUploadTest(options); //Here my options is fine
                        if (functionCheck === true || functionCheck === false) {
                            uploadTest = functionCheck;
                        }
                    }
                    if (uploadTest) {
                        upload(options).then(function(response) {
                            scope.onSuccess({response: response});
                            scope.onComplete({response: response});
                        }, function(response) {
                            scope.onError({response: response});
                            scope.onComplete({response: response});
                        });
                    } else {
                            scope.onError({response: "UploadTest Failed"});
                            scope.onComplete({response: "UploadTest Failed"});
                    }
                });
            }
        };
    }
]);

控制器：

$scope.onUploadTest = function(options) {
    console.log(options);
    return false;
};

HTML：

<div class="btn btn-primary btn-upload" upload-button url="{{url}}" accept="image/*" multiple="false"
on-success="onSuccess(response)" on-error="onError(response)" on-upload-test="onUploadTest(options)" >Upload nyt billede</div>

Answer 1

执行此操作的最佳约定是在您的后端并向前端发回错误响应，但是无法解析具有角度的文件。

angular-upload，新方法参数消失

1 个答案: