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 に答える