Question

我正在使用Force.com Apex和VF尝试利用Cloudinary进行一些内容管理。我坚持使用Chrome中的以下内容（不确定为什么它显示为'undefined'，因为在JS中定义了Cloud Name）：

POST https://api.cloudinary.com/v1_1/undefined/upload 401 (Unauthorized)    ......    api.cloudinary.com/v1_1/undefined/upload:1

在令人沮丧的情况下，非常感谢任何帮助。这是代码（注释评论）：

APEX

public String getCldSig() {

        Datetime d = datetime.now();
        Long uxtime = d.getTime() / 1000; //method provides epoch/unix time
        String apisec = '<some_secret>';
        String serial = 'callback=<some_url>&public_id=<some_id>&timestamp=' + uxtime + apisec;
        Blob sha = Crypto.generateDigest('SHA1', Blob.valueOf(serial));
        String sig = EncodingUtil.convertToHex(sha); //perhaps I need to do UTF-8
        String jsoSerial = '{"public_id":"<some_Id>",';
        jsoSerial += '"timestamp":"'+ uxtime + '",'; 
        jsoSerial += '"callback":"<some_url>",';  //maybe an issue with hosting the CORS html on a VF page.
        jsoSerial += '"signature":"' + sig + '",'; 
        jsoSerial += '"api_key":"<some_key>"}';
        return jsoSerial.escapeHtml3(); //seems to be the right escape output HTML
}

Javascript / jQuery：

                $.cloudinary.config({"api_key":"<some_key>", "cloud_name":"<some_id>"});                       
                $('.cloudinary-fileupload')
                  .fileupload({ 
                    dropZone: ".sceneUpBtn",
                    progress: function (e, data) {
                      $(".progress").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
                    }
                  });
                $('.cloudinary-fileupload').bind('fileuploadstart', function(e){
                  $('.sceneUpPrev').html('Upload started...');
                });                     
                $('.cloudinary-fileupload').bind('fileuploadfail', function(e){
                  $('.sceneUpPrev').html($.cloudinary.error); //**due to lack of documentation don't know how to get any specific error message using the jQuery library. Would expect messages similar to AWS S3
                });     
                $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  
                    $('.sceneUpPrev').html(
                       $.cloudinary.image(data.result.public_id, 
                           { format: data.result.format, version: data.result.version, 
                             crop: 'scale', width: 200 }));    
                    $('.image_public_id').val(data.result.public_id);    
                    return true;
                });

输入HTML：

<input class="cloudinary-fileupload" 
data-cloudinary-field="upref" 
data-form-data="&quot;public_id&quot;:&quot;<some_id>&quot;,&quot;timestamp&quot;:&quot;1372282433&quot;,&quot;callback&quot;:&quot;<some_url>&quot;,&quot;signature&quot;:&quot;<some_sig>&quot;,&quot;api_key&quot;:&quot;<some_key>&quot;}" 
id="sceneUpload" 
name="file" 
type="file">

Answer 1

POST网址的“未定义”部分表示Cloudinary的jQuery库在生成POST网址时无法确定cloud_name。很可能这是因为$ .cloudinary.config函数调用太晚了。请将此调用移到$（document）.ready或类似结构之外。

另一个（无关）点 - 第二行中的选择器缺少'。'它应该是$（'。cloudinary-fileupload'）

Answer 2

在Cloudinary的Tal帮助下，我取得了成功！我会回顾一下解决方案：

不要在$（document）.ready（）中实例化Cloudinary的库，而只是将其插入直接在脚本部分

    <script type="text/javascript">             
    $.cloudinary.config({"api_key":"<key>","cloud_name":"<cloud_name>"});

使用FileUpload小部件实例化formData，这可以确保fileUpload
加载你的json send params（这是一个时间问题）。

                    $('.cloudinary-fileupload').fileupload({ 
                        formData : <unescaped json params>,
                        dropZone: $('.sceneUpBtn'),                             
                        dataType: 'json',
                        done: function (e, data) {
                            $.each(data.result.files, function (index, file) {
                                $('<p/>').text(file.name).appendTo('#filename');
                            });
                            },
                        progressall: function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                            $('.sceneUpBar').css('width',progress + '%');
                        }
                });

将签名参数与发送给服务器的json params匹配。在Apex中签名并返回json：

public String getCloudinarySig() {
    Datetime d = datetime.now();
    Long uxtime = d.getTime() / 1000; //epoch unix time method in force.com
    String apisec = '<secret>';
    String serial = 'callback=<cors url>&timestamp=' + uxtime + apisec; //Signature needs params here need to match json params below
    Blob sha = Crypto.generateDigest('SHA1', Blob.valueOf(serial)); //Sha1 digest
    String sig = EncodingUtil.convertToHex(sha); //Hex conversion
    String jsoSerial = '{';
    jsoSerial += '"api_key":"<key>",'; //these json params need to match signature params above     
    jsoSerial += '"<CORS_url>",';                   
    jsoSerial += '"signature":"' + sig + '",';  
    jsoSerial += '"timestamp":'+ uxtime; 
    jsoSerial += '}';
    return jsoSerial;

}

很高兴回答任何问题......

Cloudinary jQuery上传授权

2 个答案: