[英]File upload with ng-file-upload throwing error
I'm using ng-file-upload for uploading an image file. 我正在使用ng-file-upload上传图像文件。 The code for html for the upload button is 上传按钮的html代码是
<button ng-disabled="croppedDataUrl===''" class="button button-3d button-rounded" ng-click="vm.upload(croppedDataUrl)">Upload</button>
and the code for controller is as follows 控制器的代码如下
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);
});
}
When I click the upload button the following error is being thrown.. 当我单击上载按钮时,将引发以下错误。
undefined is not a function at Upload.upload undefined不是Upload.upload的函数
I've inject the Upload service in controller and the sequence of the included js files are as follows 我已将上载服务注入控制器中,并且所包含的js文件的顺序如下
angular.js angular.js
ng-file-upload-shim.js NG-文件上传,shim.js
ng-file-upload.js NG-文件upload.js
So, I don't know where the problem is. 所以,我不知道问题出在哪里。 Thanks in advance.... 提前致谢....
Edit stacktrace 编辑堆栈跟踪
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
It seems like you haven't properly initialized/ injected the dependencies. 似乎您尚未正确初始化/注入依赖项。
In the module: 在模块中:
var app = angular.module('your_module', ['ngFileUpload']);
In the controller: 在控制器中:
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);
});
}
}
if you want to go for vanilla js , this piece of code will work for any library or no library and compatible with ng-file-upload - 如果您想使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.