javascript - 通过 jquery、ajax 和 django 发布图像时出现内部服务器错误

Question

我正在尝试通过 Jquery 和 ajax 发布裁剪后的图像。我一直在关注这个问题的解决方案 crop image using coordinates ，但是我没有运气在 Django 端接收到图像，尽管 CSRF token 和图像由 ajax 请求处理得很好。

我没有在 views.py 中做任何事情，只是尝试打印 request.FILES 和 request.POST 以查看是否返回了任何内容，但没有成功。不确定我应该如何或是否应该以不同的方式处理它。

JS

  function readURL(input) {
if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#image').attr('src', e.target.result)
  };
  reader.readAsDataURL(input.files[0]);
  setTimeout(initCropper,1000);
}

function initCropper() {
    console.log("initializing")
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16/9,
      viewMode: 1,
      autoCropArea: 0.8,
      cropBoxResizable: false,
      minCropBoxWidth: 640,
      minCropBoxHeight: 360,
      minContainerWidth: 720,
      minContainerHeight: 405,
      crop: function(e) {
        console.log(e.detail.x);
        console.log(e.detail.y);
      }
    });
document.getElementById('crop_button').addEventListener('click', function(){
  var imgurl = cropper.getCroppedCanvas().toDataURL();
  var img = document.createElement("img");
  img.src = imgurl;

  cropper.getCroppedCanvas().toBlob(function(blob){
    var formData = new FormData();
    formData.append('croppedImage', blob);
    formData.append('csrfmiddlewaretoken', '{{csrf_token}}')

    $.ajax({
      url: '/campaigns/create/',
      method:"POST",
      data: formData,
      processData: false,
      contentType: 'multipart/form-data',
      success: function () {
        console.log("Upload success");
      },
      error: function () {
        console.log('Upload error')
      }
    });
  });

})

};

HTML

<div class="col-xl-9 col-lg-9">
                                      <input type="file" name="inputImage" id="inputImage" onchange="readURL(this);"/>
                                      <div class="image_container">
                                        <img id="image" src="#" alt="your image"/>
                                      </div>
                                    </div>
                                    <button id="crop_button">Crop</button>

错误

....
[16/Dec/2018 14:08:26] "POST /campaigns/create/ HTTP/1.1" 500 59
[16/Dec/2018 14:08:26] code 400, message Bad request syntax ('------ 
WebKitFormBoundarycvWRqqCDKW5sPfBT')
[16/Dec/2018 14:08:26] "------WebKitFormBoundarycvWRqqCDKW5sPfBT" 400 -

Answer 1

您明确地将 contentType 属性设置为 multipart/form-data 但缺少 multipart/form-data< 所需的边界字符串请求。 Django 将无法理解如何解析请求正文。

尝试将 contentType 设置为 false，这将指示 JQuery 不要设置 Content-Type header 。

$.ajax({
  ...
  contentType: false,