现在一直在努力解决这个问题。我尝试将图像上传到cloudinary,然后按照cloudinary https://github.com/cloudinary/cloudinary_angular/tree/master/samples/photo_album提供的photo_album示例。这是我的上传代码:
var d = new Date();
$scope.title = 'Image('+d.getTime() + '-' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() +')';
$scope.uploadFiles = function (file) {
$scope.file = file;
console.log(file);
if( !$scope.file ) return;
if( file && !file.$error ) {
file.upload = $upload.upload( {
url : 'https://api.cloudinary.com/v1_1/' + $.cloudinary.config().cloud_name + "/upload",
fields: {
upload_preset: $.cloudinary.config().upload_preset,
tags : 'merchantAlbum',
context : 'photo=' + $scope.title
},
file : file
} );
file.upload.then( function (response) {
console.log( 'uploading...' );
$timeout( function () {
console.log( response );
file.result = response.data;
}, function (response) {
if( response.status > 0 ) {
// $scope.errorMsg = response.status + ':' + response.data;
console.log( 'error occurred' );
}
} )
} ).catch( function (error) {
console.log( 'error ', error );
} );
file.upload.progress( function (e) {
file.progress = Math.round( ( e.loaded * 100.0 ) / e.total );
file.status = 'Uploading...' + file.progress + '%';
} ).success( function (data, status, headers, config) {
$rootScope.merchantImage = $rootScope.merchantImage || [];
data.context = {
custom: {
merchantImage: $scope.title
}
};
file.result = data;
$rootScope.merchantImage.push( data );
} ).error( function (data, status, headers, config) {
file.result = data;
} )
} else {
console.log( 'error occurred' );
}
}
我尝试添加一些日志记录以查看出现问题的地方,我在浏览器中遇到的异常是:
XMLHttpRequest无法加载https://api.cloudinary.com/v1_1/xxxx/upload。预检响应中的Access-Control-Allow-Headers不允许使用请求标头字段__setXHR_。
我的依赖关系是:
<scriptsrc="bower_components/cloudinary_js/js/jquery.cloudinary.js"> </script>
<script src="bower_components/ng-file-upload/ng-file-upload- shim.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js">
</script> <script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/cloudinary_ng/js/angular.cloudinary.js"></script>
感谢您的期待!
答案 0 :(得分:0)
我成功解决了这个问题!事实证明这些插件也是必需的:
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
对于可能遇到相同问题的任何人,请将这三个插件放在依赖项的顶部。