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

【问题标题】：Internal Server Error when posting image via jquery, ajax and django通过 jquery、ajax 和 django 发布图像时出现内部服务器错误
【发布时间】：2019-05-16 20:53:42
【问题描述】：

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

我没有在我的views.py 中做任何事情，只是尝试打印request.FILES 和request.POST 来查看是否有任何返回但没有运气。不知道我应该如何或是否应该以不同的方式处理。

  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 -

【问题讨论】：

标签： javascript jquery ajax django html

【解决方案1】：

您将contentType 属性显式设置为multipart/form-data，但缺少multipart/form-data 请求所需的边界字符串。然后 Django 将不明白如何解析请求正文。

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

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

【讨论】：