Question

我正在实施一个ajax表单提交，在提交之前调整图像大小。 javascript基本上将文件读作Image，调整大小并绘制到canvas，然后将数据附加到FormData对象：

var fd = new FormData();
fd.append("image0", canvas.toDataURL("image/png"));

然后我向我的django视图提交ajax提交，并使用ModelForm进行验证：

forms.py

class InsertProduct(forms.ModelForm):
    image0 = forms.ImageField(
        required=True, 
        max_length=64, 
        widget=forms.FileInput( attrs={"id": "image0",} )
    )

views.py

def ajax_upload(request):
    if request.method == 'POST':
        form = InsertProduct(request.POST, request.FILES)
        print(request.POST.urlencode())
        print(form.errors)

urlencode()告诉我我收到了数据：

image0=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABE...

但表单错误告诉我，我没有正确绑定它：

<ul class="errorlist">
    <li>image0<ul class="errorlist"><li>This field is required.</li></ul></li>
</ul>

也许ImageField在request.FILES而不是request.POST中寻找数据？我如何使这个工作？

Answer 1

所以简短的回答是使用枕头之类的图像库将base64转换回Image文件，然后手动保存。

但是，如果您可以依赖浏览器的FormData API，则可以执行以下操作：

var fd = new FormData(document.forms[0]);
var quality = 0.95;
canvas.toBlob(function(blob){
    fd.set("image0", blob, "myimage.jpg");
}, "image/jpeg", quality);

请注意，Chrome仅支持最新稳定版本50中的FormData set和append，当我尝试set blob时，我的构建会抛出异常。似乎Firefox 46会这样做（{I}我认为，set和append被支持，但只有当FormData（）从DOM <form>元素初始化时才会这样做。如果您检查POST，您将发现文件输入字段（在DOM中不存在并且后面追加），否则将丢失。

如何以django形式ImageField绑定base64数据

forms.py

views.py

1 个答案: