0

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

但是当我将我的选项发送给该方法时，我的 controller.scope.UploadTest(options) 中的选项将保持未定义

指令中的新代码：

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>
4

1 回答 1

0

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

于 2014-09-08T12:53:00.317 回答