Javascript Ajax API请求返回400和base64图像数据

我正在尝试使用Imgur API在我的网站上创建一个功能，当我写博客文章时，我可以将一个图像拖到

中，它将被上传到Imgur，链接将为我插入文本区域。该特性利用了HTML5的可拖放特性、新的

FileReader

对象和jQueryAjax

到目前为止，当我使用

$.ajax（）

向API发送请求时，API返回400个错误，并显示消息“文件类型不受支持或图像已损坏”。但是，我知道我的图像的文件类型受支持（

数据/png

）而且，

文件阅读器

生成的数据没有损坏，因为我可以将数据粘贴到我的URL栏中，并获取插入的图片

$(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);
  }
});

---

Imgur API可能不接受JSON数据字符串；它可能只接受一个类似的

但您正在传递一个JSON字符串

如果您将

数据的实际对象而不是JSON字符串交给jQuery，jQuery将自动格式化负载：

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

另外，由于您正在存储表单数据字符串，而不是JSON，因此请从Ajax请求中删除
contentType
参数。
根据，您可以选择设置
type
参数。由于您没有设置
类型
，可能您的上传被误读为二进制数据？或者它被误读为原始的base64数据（不是——它是以
data:data/png；base64，
开头的base64数据）。唯一的另一个
type
选项是URL，它似乎应该可以工作，但是当Imgur API被告知需要一个URL时，我不会依赖它来理解
数据
uri。@apsillers将
type:'base64'
添加到dat变量中仍然会返回400，就像切片
数据：data/png一样；base64，
退出event.target.result。通过传递实际对象和表单样式的POST数据有效负载，没有任何更改，仍然是相同的400错误。请尝试删除
contentType
参数。你能在Chrome开发者工具的网络标签中上传你的请求的“请求负载”的屏幕截图吗？（或Firebug或其他分析工具中的类似数据）噢，哇。就是这样，放弃了contentType，得到了200分。就这么简单，谢谢。
var datObj = { image: event.target.result };
 $.ajax({
     type: "POST",
     data: datObj,
     ...