javascript - Ajax API 请求返回 400 和 Base64 图像数据

Question

我正在尝试使用 Imgur API 在我的网站上创建一项功能，当我撰写博客文章时，我可以将图像拖到 <textarea> 中。它将被上传到 Imgur，链接将被插入到我的文本区域中。此功能利用了 HTML5 的可拖动/可放置功能，即新的 FileReader对象和 jQuery AJAX。

到目前为止，当我使用$.ajax()时向 API 发送请求时，API 返回 400 错误，并显示消息“文件类型不受支持或图像已损坏”。但是，我知道我的图像的文件类型受支持( data/png )并且由 FileReader 生成的数据。没有损坏，因为我可以将数据粘贴到我的 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);
  }
});

Answer 1

Imgur API 可能不接受 JSON 数据字符串；它可能只接受 form-style POST data payload喜欢

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

但您要向其传递一个 JSON 字符串。

如果您向其提供数据的实际对象，而不是JSON字符串，jQuery将自动格式化您的有效负载:

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

此外，由于您使用的是表单数据字符串，而不是 JSON，因此请从 Ajax 请求中删除 contentType 参数。