将 MultiValueDictKeyError 提高 request.FILES 以获取 base64 图像数据

Raise MultiValueDictKeyError by request.FILES to get base64 image data

实际上我需要获取 croppie javascript 库生成的 base64 图像数据。图像数据如下所示。

data:image/png;base64,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

这是我的 HTML

<form action="{% url 'profile' %}" enctype="multipart/form-data" method="post" class="pic-upload-form" id="form">{% csrf_token %}
      <div class="custom-file">
        {% bootstrap_form form %}
      </div>
      <!-- Croppie area -->
      <div id="upload-demo"></div>
      <input type="hidden" id="image-data" name="imagebase64">
      <button  type="button" class="btn btn-outline-info btn-custom upload-result">save</button>
 </form>

我将图像数据绑定到隐藏输入的 js 的最后一部分。

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'base64',
        size: 'viewport'
    }).then(function (src) {
         console.log(src);

         // bind the image data to the hidden inpu id image-data
         $('#image-data').attr('src', src);
         $('#form').submit();
    });
});

这是我的观点

def user_profile_view(request):
  '''Handle the image of the user.'''

  if request.method == 'POST':
      form = UploadPicForm(request.POST, request.FILES)
      if form.is_valid():
        profile = form.save(commit=False)

        # get the base64 image data
        profile.image = request.FILES['imagebase64']
        profile.save()
        messages.success(request, 'your pic updated successfully.')
        return HttpResponseRedirect(reverse('learning_path_tracker:home'))
else:
    # form's user field populated by current user
    form = UploadPicForm(initial={'user': request.user})
return render(request, 'users/uploadpic.html', {'form': form})

我认为图像数据不是字符串,这就是 request.FILES 引发错误的原因。但是我该如何解决这个问题,在此先感谢。

request.FILES 仅包含使用输入 type="file" 上传的文件。而您使用 type="hidden" 将图像数据作为 base64 发送,它将数据作为字符串发送,而不是作为文件发送。

因此,图像应该出现在 request.POST 而不是 request.FILES 中。

这样做:

profile.image = request.POST['imagebase64']

附带说明一下,您应该使用字典的 get() 方法而不是直接从字典访问键,因为如果请求的键不在字典中,它可以让您提供默认值。

profile.image = request.POST.get('imagebase64', "default value")