Загрузка файла с ошибкой выдачи ng-file-upload

Я использую ng-file-upload для загрузки файла изображения. Код для html для кнопки загрузки

<button ng-disabled="croppedDataUrl===''" class="button button-3d button-rounded" ng-click="vm.upload(croppedDataUrl)">Upload</button>

и код для контроллера выглядит следующим образом

vm.upload = function(dataUrl) {
        Upload.upload({
            url: AppConstants.api.images,
            data: {
                uploadedPicture: dataUrl,
                uploadedFrom: 'recipe'
            },
        }).then(function(response) {
            $timeout(function() {
                $scope.result = response.data;
            });
        }, function(response) {
            if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
        }, function(evt) {
            $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        });
    }

Когда я нажимаю кнопку загрузки, возникает следующая ошибка.

undefined не является функцией в Upload.upload

Я внедрил службу загрузки в контроллер, и последовательность включенных файлов js выглядит следующим образом.

угловой.js

ng-file-upload-shim.js

ng-файл-upload.js

Итак, я не знаю, где проблема. Заранее спасибо....

Изменить трассировку стека

TypeError: undefined is not a function
at vm.upload (http://localhost:8888/yn-site/app/dist/js/app.min.js:5000:24)
at fn (eval at <anonymous> (http://localhost:8888/yn-site/app/dist/js/vendor.min.js:13365:15), <anonymous>:4:379)
at callback (http://localhost:8888/yn-site/app/dist/js/vendor.min.js:23613:17)
at Scope.$eval (http://localhost:8888/yn-site/app/dist/js/vendor.min.js:16052:28)
at Scope.$apply (http://localhost:8888/yn-site/app/dist/js/vendor.min.js:16152:25)
at HTMLButtonElement.<anonymous> (http://localhost:8888/yn-site/app/dist/js/vendor.min.js:23618:23)
at HTMLButtonElement.m.event.dispatch (http://localhost:8888/yn-site/js/jquery.js:2:40587)
at HTMLButtonElement.r.handle (http://localhost:8888/yn-site/js/jquery.js:2:37297) vendor.min.js:12520(anonymous function) vendor.min.js:12520(anonymous function) vendor.min.js:9292Scope.$apply vendor.min.js:16157(anonymous function) vendor.min.js:23618m.event.dispatch jquery.js:2r.handle

javascript angularjs ng-file-upload
person Rajesh Dan    schedule 10.12.2015    source источник
comment
Это реальная ошибка или ваша версия? Опубликуйте трассировку стека.   -  person Phix    schedule 10.12.2015
comment
Строка app.min.js:5000:24 указывает на функцию Upload.upload({...})   -  person Rajesh Dan    schedule 10.12.2015
comment
покажите объявление вашего модуля и контроллера   -  person Praveen Prasannan    schedule 10.12.2015

Ответы (2)


arrow_upward
4
arrow_downward

Похоже, вы неправильно инициализировали/ввели зависимости.

В модуле:

var app = angular.module('your_module', ['ngFileUpload']);

В контроллере:

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
$scope.upload = function(dataUrl) {
        Upload.upload({
            url: AppConstants.api.images,
            data: {
                uploadedPicture: dataUrl,
                uploadedFrom: 'recipe'
            },
        }).then(function(response) {
            $timeout(function() {
                $scope.result = response.data;
            });
        }, function(response) {
            if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
        }, function(evt) {
            $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        });
    }
}
person Praveen Prasannan    schedule 10.12.2015

arrow_upward
0
arrow_downward

если вы хотите перейти на vanilla js, этот фрагмент кода будет работать для любой библиотеки или без библиотеки и совместим с ng-file-upload -

          var xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          var formData = new FormData;
          formData.append('YOUR_FILE_OBJECT_NAME', file);
          xhr.addEventListener("readystatechange", function() {
            if (this.readyState === 4) {
              console.log(this.responseText);
            }
          });

          xhr.open("POST", "YOUR_URL_HERE");
          xhr.send(formData);
person Partha Roy    schedule 07.04.2017