如何将包含带有Ajax图像的表单提交给Django rest框架？

Question

您能发现我做错了什么吗？

这是表单（在模板标签中创建）：

@register.simple_tag(takes_context=True)
def add_picture_upload(context,textarea_id):
  a = """<form style="display:none; visibility:hidden;" id="add_image_form" action="/fotos/upload/" method="post" enctype="multipart/form-data" >""" 
  b = """</form>"""
  form = PictureForm()
  return a+str(form)+b

在这里，在提交时调用的javascript：

function html_add_image(event) {
  event.stopPropagation(); // Stop stuff happening
  event.preventDefault(); // Totally stop stuff happening
  var data_dict = new FormData($(this)[0]);
  var req = api_create("pictures", data_dict);
  req.done(function(data) {
    alert(data);
  })
}

这里的ajax请求：

function api_create(content_name, data_dict) {
  var req = $.ajax({
      url: '/api/'+content_name+'/',
      contentType:"application/json",
      dataType: "json",
      data: data_dict,
      processData: false,
      type: 'POST'
  }).fail(function(jqXHR, status, err){
    // fail
  })
  return req;
}

它给了我：

详细信息：“ JSON解析错误-'utf8'编解码器无法解码位置148中的字节0xff：无效的起始字节”

或者如果我用JSON.stringify数据代替，我得到：

image_field：[“未提交任何文件。”]

您是否有任何建议或网站提供了可行的示例？ 我知道很多人都在为此苦苦挣扎，但是这里的所有其他问题并没有真正解决。

感谢您的时间。

Answer 1

与流行的看法相反， 不可能使用JSON上传文件，以使Django可以识别文件而不会对其进行黑客攻击。 这是因为JSON本身不支持文件上传 ，因此您必须自己处理文件序列化和上传。

但是你有一些选择

• 将文件上传与元数据分开处理。 这将需要文件和元数据的单独端点，类似于Dropbox 分离文件上载和元数据的操作 。
• 在上传文件时对它们进行Base64编码，并使用自定义的Base64FileField进行处理。 drf-extras提供了可以使用的Base64ImageField 。