时间戳

首页 > 解决方案 > 通过 jquery、ajax 和 django 发布图像时出现内部服务器错误

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

问题描述

我正在尝试通过 Jquery 和 ajax 发布裁剪的图像。我一直在关注这个问题的解决方案，使用坐标裁剪图像，但是我没有运气在 Django 端接收到图像，尽管 CSRF 令牌和图像由 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 -

标签： javascriptjqueryajaxdjangohtml

解决方案

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

尝试设置contentType为falsewhich 将指示 JQuery 不设置Content-Type标题。

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

推荐阅读