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

Question

在 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 对象创建一个变量并将其显示在模板页面上？

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

但我还想获取上传照片的模特 ID，以使用该 ID 创建照片 link。

我可以在 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>

Answer 1

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

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

$.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>'));

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

Cloudinary direct upload documentation example is not clear

javascript

django

cloudinary