Я пытался заставить облачную загрузку работать.
Используя пример из облачной библиотеки php, он отлично работает в автономном режиме и загружает без проблем.
Когда я перемещаю код в существующее приложение Laravel, я сталкиваюсь с проблемой.
А именно я получаю эту ошибку в консоли:
XMLHttpRequest не может загрузить https://api.cloudinary.com/v1_1/mycloudinaryname/auto/upload. Запрос был перенаправлен в 'http: // localhost / laravelappfolder / cloudinary_co… =% 23% 3CSet% 3A0x0000000c3691e0% 3Etype = uploadversion = 1457930756width = 1920', что запрещено для запросов из разных источников, требующих предварительной проверки.
Я пытался найти что-то, что могло бы указать мне правильное направление, но я не могу ничего найти. Он отлично работает как автономный, но не работает в приложении laravel. Код точно такой же (используется тот же JQuery).
На мой взгляд, я имею. Я использую функцию загрузки без знака:
{!! cl_unsigned_image_upload_tag('fileupload', 'repository',
["callback" => $cors_location,
"public_id"=>"blahblah".time(),
"html" => ["multiple" => true],
"class" => "form-control"])
!!}
$ cors_location предоставляет местоположение html-файла cors, который поставляется с библиотекой php. Расположение изнутри 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 = $('<div class="uploaded_info"/>');
$(info).append($('<div class="image"/>').append(
$.cloudinary.image(data.result.public_id, {
format: data.result.format, width: 150, height: 150, crop: "fill"})
));
$('.uploaded_info_holder').append(info);
});
});
$ cloud_upcomp — это расположение файла upload_complete.php из облачной библиотеки php.
Событие ‘cloudinarydone’ никогда не запускается, так как выдает ошибку, полученную ранее. Но, как ни странно, файл изображения был загружен, так как я могу просмотреть загруженный файл в моей облачной учетной записи.
Вот HTML-код, сгенерированный облачной библиотекой (а именно: <input>
тег, сгенерированный функцией):
<div class="row">
<div class="col-md-6" id="file_drop">
<form>
<span class="status_value form-label">Awaiting user selection</span>
<input class='cloudinary-fileupload' data-cloudinary-field='fileupload' data-form-data='{"timestamp":1458079831,"callback":"http:\/\/localhost\/laravel\/public\/assets\/vendors\/cloudinary\/lib\/cloudinary_cors.html","public_id":"blahblah1458079831","upload_preset":"repository"}' data-url='https://api.cloudinary.com/v1_1/myaccount/auto/upload' multiple='1' name='file' type='file'/>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span id="progtext" class="progress-text"></span>
</div>
</div>
</form>
</div>
<div class="uploaded_info_holder"></div>
</div>
Я только что перезаписал имя своей учетной записи, но URL-адрес имеет правильное имя учетной записи, когда оно генерируется функцией.
Хорошо, я чувствую себя немного глупо и смущенно!
Кажется, моя проблема больше связана с порядком импорта JS.
<script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.ui.widget.js') }}"></script>
<script type="text/javascript"src="{{ asset('assets/vendors/cloudinary/js/jquery.iframe-transport.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.fileupload.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.cloudinary.js') }}"></script>
Это порядок, в котором должны быть установлены файлы JS. И они должны быть первой группой файлов JS в разделе нижнего колонтитула, особенно до настройки облачного JQuery.
Как только я это сделал, все начало работать без ошибок.
Других решений пока нет …