我一直在努力使cloudinary上传工作。
使用php cloudinary库中的示例,它可以独立运行,并且可以顺利上传。
当我将代码移至现有的Laravel应用程序时,我遇到了问题。
即我在控制台中收到此错误:
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloudinaryname/auto/upload. The request was redirected to 'http://localhost/laravelappfolder/cloudinary_co…=%23%3CSet%3A0x0000000c3691e0%3E&type=upload&version=1457930756&width=1920', which is disallowed for cross-origin requests that require preflight.
我一直在尝试寻找可以指引我正确方向的东西,但似乎什么也找不到。它可以独立运行,但在laravel应用中无法运行。代码完全相同(使用相同的jquery)。
在我的laravel视图中,我有。我正在使用未签名的上传功能:
{!! cl_unsigned_image_upload_tag('fileupload', 'repository',
["callback" => $cors_location,
"public_id"=>"blahblah".time(),
"html" => ["multiple" => true],
"class" =>"form-control"])
!!}
$ cors_location提供php库随附的cors html文件的位置。 laravel中的位置正确。
我知道我可能很简单,但我只是想不到它会是什么。
这是JQuery代码:
$(function() {
$('.cloudinary-fileupload')
.fileupload({
dropZone: '#file_drop',
start: function () {
$('.status_value').text('Please wait, starting upload...');
},
progress: function (e, data) {
$('.status_value').text('Please wait, uploading...');
var progval = Math.round((data.loaded * 100.0) / data.total);
$('#progtext').text(progval+'%');
$(".progress-bar").css('width', progval+'%').attr('aria-valuenow', progval);
},
})
.on('cloudinarydone', function (e, data) {
$('.status_value').text('Idle');
$(".progress-bar").css('width', '0%').attr('aria-valuenow', 0);
$.post('{{ $cloud_upcomp }}', data.result);
var info = $('');
$(info).append($('').append(
$.cloudinary.image(data.result.public_id, {
format: data.result.format, width: 150, height: 150, crop:"fill"
})
));
$('.uploaded_info_holder').append(info);
});
});
$ cloud_upcomp是cloudinary php库中upload_complete.php文件的位置。
永远不会触发'cloudinarydone'事件,因为它会产生以前的错误。但是奇怪的是,该图像文件已上传,因为我可以在自己的cloudinary帐户中查看上传的文件。
这是Cloudinary库生成的HTML(即函数生成的标记):
Awaiting user selection
我刚刚覆盖了我的帐户名,但是当函数生成该URL时,URL具有正确的帐户名。
请分享呈现的HTML页面。 具体来说,上传器代码包括输入标签和相关的jQuery。
已将HTML代码添加到我的问题中
好吧,我感觉有些愚蠢和sheep脚!
看来我的问题更多来自JS导入排序。
这是必须设置JS文件的顺序。 并且它们必须是页脚部分中的第一批JS文件,尤其是在建立云JQuery之前。
完成此操作后,一切都将开始正常运行而不会出错。