尝试上传到 Cloudinary 时收到令人困惑的错误

Posted 2023-03-25

【中文标题】尝试上传到 Cloudinary 时收到令人困惑的错误

【英文标题】：Receiving confusing error while trying to upload to Cloudinary

【发布时间】：2016-06-29 01:06:43

【问题描述】：

我一直在尝试让云端上传工作。 使用 php cloudinary 库中的示例，它可以独立运行，并且可以毫无问题地上传。 当我将代码移动到现有的 Laravel 应用程序时，我遇到了问题。 即我在控制台中收到此错误：

XMLHttpRequest 无法加载 https://api.cloudinary.com/v1_1/mycloudinaryname/auto/upload。该请求被重定向到“http://localhost/laravelappfolder/cloudinary_co…=%23%3CSet%3A0x0000000c3691e0%3E&type=upload&version=1457930756&width=1920”，这对于需要预检的跨域请求是不允许的。

我一直在努力寻找可以为我指明正确方向的东西，但我似乎找不到任何东西。它可以独立运行，但在 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 文件的位置。 'cloudinarydone' 事件永远不会被触发，因为它给出了之前的错误。但奇怪的是，图像文件已经上传，因为我可以在我的云帐户中查看上传的文件。

这里是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>

我刚刚覆盖了我的帐户名，但该 URL 在函数生成时具有正确的帐户名。

【问题讨论】：

请分享呈现的 HTML 页面。特别是上传者代码，包括输入标签和相关的jQuery。

已将 HTML 代码添加到我的问题中

【参考方案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 文件，尤其是在建立云 JQuery 之前。 一旦我这样做了，一切都开始正常工作，没有错误。