Cloudinary 直接上传文档示例不清楚答案

【问题标题】：Cloudinary direct upload documentation example is not clearCloudinary 直接上传文档示例不清楚
【发布时间】：2019-10-30 00:54:49
【问题描述】：

在Cloudinary Django SDK documentation 中直接从浏览器上传，下面给出了direct_upload_complete 视图的示例。

@csrf_exempt
def direct_upload_complete(request):
  form = PhotoDirectForm(request.POST)
  if form.is_valid():
    form.save()
    ret = dict(photo_id = form.instance.id)
  else:
    ret = dict(errors = form.errors)

  return HttpResponse(json.dumps(ret), content_type='application/json')

在此示例之后立即显示 存储图像 ID 后，您现在可以像显示任何其他 Cloudinary 托管图像一样显示直接上传的图像： 并给出如下模板代码示例：

{% load cloudinary %}      
{% cloudinary photo.image format="jpg" width=120 height=80 crop="fill" %}

我对这个模板代码示例感到困惑，因为它与响应名称为 ret 的 Django 视图代码完全无关。文档截图如下。

我需要做什么才能使用 Javascript 从名为 ret 的 JSON 对象创建一个变量并将其显示在模板页面上？

下面是我在示例的upload_prompt.html 模板上使用的Javascript。它工作正常，返回上传图像的拇指和一些在图像上传后显示的 Cloudinary 数据（在cloudinarydone 事件上）。

但我还想获取上传照片的模型 ID，以使用该 ID 创建指向照片的链接。

在下面的 Javascript 中，我可以从名为 ret 的 JSON 对象中获取 photo_id 键值吗？

<script>
    $(function () {
        $('#direct_upload input[type="file"]')
        .cloudinary_fileupload({
            dropZone: '#direct_upload',
            start: function (e) {
                $('.status').text('Starting upload...');
            },
            progress: function (e, data) {
            // $('.status').text('Uploading...');
                $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");            
            },
            fail: function (e, data) {
            $(".status").text("Upload failed");
            }
        })
        .on('cloudinarydone', function (e, data) {
            $('.status').text('Updating backend...');
            $.post(this.form.action, $(this.form).serialize()).always(function (result, status, jqxhr) {
                $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
            });
            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"
                })
            );               
            $(info).append($('<div/>').append('image/upload/' + data.result.path));
            $('.uploaded_info_holder').append(info);

        });
    });

</script>

【问题讨论】：

为什么你认为这两件事是相关的？ direct_upload_complete 用于上传和保存图像。 ret 是该保存操作的状态。这与显示图像无关，您可以通过引用保存到的模型实例来单独执行此操作。
首先，它们在文档中平淡无奇。其次，direct_upload_complete 不仅上传和保存，还会发送响应。该响应包含上传照片的模型 ID。我想访问该模型 ID，以便可以在模板中使用它来引用它。你能在模板中描述如何做到这一点吗？

标签： javascript django cloudinary

【解决方案1】：

感谢 Cloudinary 支持的 Brian Luk，获取 photo_id 值是在模板的 javascript POST 请求回调中完成的。

也许有更好的方法可以做到这一点，但我只是创建了变量photoid，然后使用该变量创建照片模型网址。

$.post(this.form.action, $(this.form)
    .serialize()).always(function (result, status, jqxhr) { 
    $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
var photoid = JSON.stringify(result.photo_id);

$(info).append($('<div/>').append('<a href="/photo/' + photoid + '/">link</a>'));

【讨论】：