Ajax API Request返回400 with base64图像数据

Question

I'm trying to use the Imgur API to create a feature on my website in which when I am writing a blog post, I can drag an image into the <textarea> and it will be uploaded to Imgur and the link will be inserted into the textarea for me. This feature makes use of HTML5's Draggable/Droppable features, the new FileReader object, and jQuery AJAX.

So far, when I use $.ajax() to send a request to the API, the API returns 400 errors, with the message "Filetype is not supported or the image is corrupt." However, I know that the filetype of my image is supported ( data/png ) and that the data being generated by the FileReader is not corrupt because I can paste the data into my URL bar and get the picture that I had inserted.

$(document).ready(function(e) {
  var area = document.getElementById('post_body');
  function readFiles(files) {
    console.log("readfiles called! files: ");
    console.log(files);
    var fr = new FileReader();
    fr.onload = function(event) {
      console.log(event);
      var dat = "{image:'"+event.target.result+"'}";
      console.log(dat);
      $.ajax({
        type:"POST",
        data:dat,
        url:'https://api.imgur.com/3/image',
        headers: {
          Authorization: "Client-ID CLIENT-ID-WAS-HERE"
        },
        contentType: "text/json; charset=utf-8",
        dataType: "json",
        success:function(msg) {
          console.log(msg);
          area.innerHTML += msg.data;
        },
        error:function(errormsg) {
          console.log(errormsg);
          alert("Sorry, there was an error uploading the image." + errormsg.responseText);
        }
      });
    }
    fr.readAsDataURL(files[0]);
  }

  area.ondragover = function(e) {
    e.preventDefault();
    console.log("ondragover fired!");
    $(this).addClass('hover');
  }
  area.ondragend = function(e) {
    e.preventDefault();
    console.log("ondragend fired!");
    $(this).removeClass('hover');
  }
  area.ondrop = function(e) {
    console.log("ondrop fired!!");
    if ($(this).hasClass('hover')) $(this).removeClass('hover')
    e.preventDefault();
    readFiles(e.dataTransfer.files);
  }
});

Answer 1

The Imgur API might not accept JSON data strings; it may only accept a form-style POST data payload like

image=fQas3r...&type=base64&title=Cats%20Forever

but you're passing it a JSON string.

jQuery will auto-format your payload if you hand it an actual object for data , instead of a JSON string:

var datObj = { image: event.target.result };
 $.ajax({
     type: "POST",
     data: datObj,
     ...

Also, since you're seding a form data string, not JSON, drop the contentType parameter from your Ajax request.