Ajax API請求返回400與base64圖像數據

我試圖使用Imgur API在我的網站上創建一個功能，當我寫博客文章時，我可以將圖像拖入<textarea>，它會上傳到Imgur，鏈接將插入到我的textarea。此功能利用HTML5的可拖拽/放置功能，新的FileReader對象和jQuery AJAX。Ajax API請求返回400與base64圖像數據

到目前爲止，當我使用$.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); 
    } 
});

來源

2013-06-20 Polyov

根據[Imgur API]（http://api.imgur.com/endpoints/image#image-upload），您可以選擇設置'type'參數。既然你沒有設置'type'，或許你的上傳被誤讀爲二進制數據？或者它可能被誤認爲原始的base64數據（它不是 - 它是以'data：data/png; base64'開頭的base64數據）。唯一的另一個'type'選項是URL，它看起來像它的mabe應該工作，但是當我們告訴它需要一個URL時，我不會依賴Imgur API來理解'data' URI。 – apsillers

@apsillers將'type：'base64''添加到dat變量仍會返回一個400，與將event.target.result中的'data：data/png; base64'切片一樣。 – Polyov

Imgur API可能不接受JSON數據字符串;它可能只接受form-style POST data payload像

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

但你傳遞一個JSON字符串。

jQuery將自動格式的有效載荷，如果你把它的實際對象data，而不是一個JSON字符串：

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

而且，由於你seding表單數據字符串，而不是JSON ，請從您的Ajax請求中刪除contentType參數。

來源

2013-06-20 14:26:27 apsillers

通過傳遞一個實際的對象和一個表單式的POST數據有效載荷都沒有變化，仍然是相同的400錯誤。 – Polyov

嘗試刪除'contentType'參數。您可以在Chrome的開發人員工具的「網絡」標籤中上傳請求的「請求有效負載」屏幕截圖嗎？（或在Firebug或其他分析工具中的類似數據。） – apsillers

哦哇。就是這樣，刪除了contentType並得到了200.簡單的，謝謝。 – Polyov

Ajax API請求返回400與base64圖像數據

回答

相關問題