尝试上传到Cloudinary时收到混乱的错误

时间:2016-03-14 05:15:05

标签: php jquery laravel upload cloudinary

我一直试图让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 = $('<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是来自cloudinary php库的upload_complete.php文件的位置。
&nbsp;&#39; cloudinarydone&#39; event永远不会被触发,因为它会从之前发出错误。但奇怪的是,图像文件已上传,因为我可以在我的cloudinary帐户中查看上传的文件。

以下是Cloudinary库生成的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>

我刚刚覆盖了我的帐户名称,但是当该功能生成该网址时,该网址具有正确的帐户名称。

1 个答案:

答案 0 :(得分:1)

好的,我感觉有点愚蠢和羞怯!
看来我的问题更多源于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文件,尤其是在cloudinary JQuery设置之前 一旦我这样做,这一切都开始正常运行没有错误。