Question

我正在创建一个webapp，向用户显示图像，用户可以在图像上绘图（基本上图像在画布中）。

现在，一旦用户完成绘图，用户将按下保存按钮，图像需要保存在静态文件夹中（不在本地）。因为我使用Django来完成这个任务;我的request.FILES在我呼叫路线时总是空的。

我的问题是如何将用户绘制的画布保存到项目中的文件夹而不是本地。

的index.html

<div id="uploaderForm">
        <form enctype="multipart/form-data" action="{% url 'addImg' %}" method="post">
            <input type="hidden" for="image_data" id="image_data" name="image_data" />
        </form>

         <div class="uploaderItem" id="uploaderSubmit">
            <a href="#" onclick="addImage();">Add to the gallery</a>
         </div>
</div>

的script.js

function addImage()
{   
    console.log("In add image");
    var image_data = canvas.toDataURL();
    console.log("Image data:", image_data);
    $('#image_data').val(image_data);
    $('#uploaderForm > form').submit()

}

views.py

def add(request):
    print request.FILES
    #print request.POST['image_data']
    return HttpResponse("You're looking at question")

Answer 1

FILES数组保留用于通过多部分表单在文件输入字段中上传的文件。您正在做的是将表示图像的base-64编码字符串传递给隐藏文本字段，然后将其发送到您的服务器。根据您的代码，图片应该在这里找到：

image_data = request.POST.get('image_data')

它将是一个base-64字符串，所以你需要解码它，下面的例子几乎可以应用于任何数据URL，但格式取决于你的浏览器，所以它有点棘手：

import re
pattern = r'^data:(?P<mime_type>[^;]+);base64,(?P<image>.+)$'
result = re.match(pattern, image_data)
if result:
  mime_type = result.group('mime_type')
  image = result.group('image').decode('base64')

小心：通过不使用文件作为传输，你基本上是将整个图像转储到服务器的内存中，如果你计划为很多客户服务，这是很昂贵的，而且它也很耗时，所以你的请求在完成图像之前可能会超时。

要解决此问题，您应该考虑通过AJAX上传图像，这是一种在javascript中处理Blob的受支持方式，这样您就可以更有效地使用Django的文件上传工具

保存画布图像时，Django request.FILES为空

1 个答案: