I am uploading image file using ng-file-upload for image upload. using the example given, I encountered access-control header error.
vm.uploadPic = function(file) {
file.upload = Upload.upload({
url: 'http://localhost:8000/api/v1/quotes/quoteitem/image/upload',
data: {quote_item_id: vm.quote_item_id, filename: file}
});
}
This gives error
XMLHttpRequest cannot load http://localhost:8000/api/v1/quotes/quoteitem/image/upload . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access.
I don't need any header request while uploading image in postman so, I removed header.
vm.uploadPic = function(file) {
file.upload = Upload.upload({
url: domain+'/api/v1/quotes/quoteitem/image/upload',
data: {quote_item_id: vm.quote_item_id, filename: file},
transformRequest: function(data, headersGetter) {
var headers = headersGetter();
headers['Content-type']=undefined;
return headers;
}
});
}
This gives
TypeError: data.hasOwnProperty is not a function at ng-file-upload.js:310 at angular.js:10484 at forEach (angular.js:322) at transformData (angular.js:10483) at $get.serverRequest (angular.js:11211) at processQueue (angular.js:15961) at angular.js:15977 at Scope.$get.Scope.$eval (angular.js:17229) at Scope.$get.Scope.$digest (angular.js:17045) at Scope.$get.Scope.$apply (angular.js:17337)
I am stuck in this for quite a time now. I have tested in server side and it works fine in postman. Any help would be wonderful.
问题是您从端口3000的站点上传到端口8000的端点。这些被视为单独的起源,因此浏览器的安全功能正在发挥作用。您需要将它们放在同一个源上,或者添加' Access-Control-Allow-Origin'标头到上载端点的服务器端响应。
Please try these one
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
alert("success");
})
.error(function(data){
alert("error");
});
};
}]);
myApp.controller('fupController', ['$scope', 'fileUpload', '$http', function($scope, fileUpload, $http){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is '+ file );
console.dir(file);
var uploadUrl = 'http://localhost:8000/api/v1/quotes/quoteitem/image/upload';
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
Try this
<form method="post" enctype="multipart/form-data" ng-controller="commentCtrl" name="form">
<a href="" type="file" class="custom-height"><img src="source/assets/images/icons/icofileattached.png" class="attachmentpng-height" ngf-select="uploadFiles($file)" ng-model="files"/></a>
<md-button type="submit" class="md-raised custom-submit-button" ng-click="MakeComments()"> SUBMIT </md-button>
</form>
$scope.uploadFiles = function(file) {
console.log(file);
$scope.fileData = file;
var fd = new FormData();
fd.append('file', file);
Restangular.one('/api/files/end points').withHttpConfig({transformRequest: angular.identity})
.customPOST(fd, '', undefined, {'Content-Type': undefined})
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.