如何将通过javascript收集的数据URI发送到Django模型字段？

我想使用来自的签名板将图像附加到保存到服务器的Django表单。使用我拥有的代码，我可以成功地从签名板下载图像，并通过Django的ImageField将图像上传到服务器，并通过数据库上的图像链接。但是，我无法将签名图像发送到服务器。

我认为我还需要做的两件事是：

将图像发送到

签名

字段表单

对图像进行编码，以便将其保存到服务器

我还有几个其他非必要的问题：在提交之前，图像数据当前是否保存在signaturePad.toDataURL中？我不知道该图像是作为数据URI字符串还是作为指向.PNG文件的链接发送到服务器，因此我不知道该图像是作为数据URI字符串还是作为链接发送到服务器的。我想一根绳子更容易处理，对吗

这是我的模特

from django.db import models

class testModel(models.Model):
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to='signatures/')
    signature = models.FileField()

forms.py：

from django import forms
from .models import testModel

class testForm(forms.ModelForm):
    class Meta:
        model = testModel
        fields = '__all__'
        widgets = {'signature': forms.HiddenInput()}

views.py：

from django.shortcuts import render
from django.urls import reverse
from django.http import HttpResponse, HttpResponseRedirect

from .Forms import testForm
from .Models import testModel

def testFormPage(request):
    if request.method == 'POST':
        form = testForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/thanks/')
    else:
        form = testForm()
    return render(request, 'testFormPage.html', {'form': form})

以及HTML表单：

<form action="{% url 'testFormPage' %}" method="post" enctype="multipart/form-data">
  <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas></canvas>
      <button type="button" class="button save" data-action="save-png">Save as PNG</button>
    </div>
  </div>
  <input type="hidden" name="signature" value="formSig.value" id="formSig">
  <input type="submit" value="Submit">
</form>

---

您是否成功地以数据uri格式提交了

签名

？是否在已清理的数据中？您需要将提交事件侦听器添加到表单元素表单未在views.py中的

Is\u valid（）

方法之外清理。当我尝试提交

签名时

收到验证错误：“（隐藏字段签名）未提交任何文件。请检查表单上的编码类型。”但是，我已成功地将图像上载到ImageField，并将该文件作为PNG文件下载，如签名演示中所做。我更新了我的帖子来展示我是如何做到这些的。如果你要提交一个文件，你需要在表单标签上设置

enctype=“multipart/form data”

，我做了一些挖掘，也意识到了这一点。我仍然得到相同的验证错误。我对这篇文章做得越多，我想我需要知道的东西就越清楚，所以我编辑了我的文章，以便更准确。谢谢你迄今为止的帮助！您是否成功地以数据uri格式提交了

签名

？是否在已清理的数据中？您需要将提交事件侦听器添加到表单元素表单未在views.py中的

Is\u valid（）

方法之外清理。当我尝试提交

签名时

收到验证错误：“（隐藏字段签名）未提交任何文件。请检查表单上的编码类型。”但是，我已成功地将图像上载到ImageField，并将该文件作为PNG文件下载，如签名演示中所做。我更新了我的帖子来展示我是如何做到这些的。如果你要提交一个文件，你需要在表单标签上设置

enctype=“multipart/form data”

，我做了一些挖掘，也意识到了这一点。我仍然得到相同的验证错误。我对这篇文章做得越多，我想我需要知道的东西就越清楚，所以我编辑了我的文章，以便更准确。谢谢你迄今为止的帮助！

var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var formSig = wrapper.querySelector("[data-action=formSig]");

// and...
savePNGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    download(dataURL, "signature.png");
  }
});
formSig.addEventListener("submit", function(event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    signature.value = signaturePad.toDataURL();
  };