3 
    var fd = new FormData();
    fd.append("image", file); // Append the file
    fd.append("key", API_KEY);
    // Create the XHR (Cross-Domain XHR FTW!!!)
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
    xhr.onload = function() {
        console.log(JSON.stringify(xhr.responseText));
        alert("Anything?");
        var img_url = JSON.parse(xhr.responseText).upload.links.original;
        console.log("Image url of the uploaded image" + img_url);

上面的代码是我用来通过phonegap上传图片文件的代码。但后来我猜代码已经过时并且不能使用最新的 imgur API。它由 OAuth 支持。我可以知道如何修复它以上传图像吗？

4

1 回答 1

6

你是对的......代码已经过时了，所以我修复的方法是使用以下说明匿名上传图片：

1.-在FormData你只需要附加图像，所以不应该附加密钥

2.-您必须发送带有您的客户ID的标头，我假设您已经拥有...我使用以下代码xhr.setRequestHeader('Authorization', 'Client-ID FOO'); 完成了根据文档，它必须在打开之后XMLHttpRequest但在发送请求之前。

3.-当您尝试获取链接时，您必须解析 JSON 才能读取信息，链接来自data具有名称的节点，link因此解析将是：var link = JSON.parse(xhr.responseText).data.link;

4.- 您必须使用 OAuth 2.0 的新稳定 API，因此您上传图像的行应如下所示：xhr.open("POST", "https://api.imgur.com/3/image.json");... 如您所见，它只是更改数字，即版本，而不是upload它使用image它必须是https......供您参考，这是第一个建议的方法，另一种建议的方法，也有效，如下：xhr.open("POST", "https://api.imgur.com/3/upload.json");

对于您的代码，我还假设您使用了 Drag'n Drop 的示例，因此该函数应如下所示：

function upload(file) {

    /* Is the file an image? */
    if (!file || !file.type.match(/image.*/)) return;

    /* It is! */
    document.body.className = "uploading";

    /* Lets build a FormData object*/
    var fd = new FormData(); 
    fd.append("image", file); // Append the file
    var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
    xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
    xhr.onload = function() {
    // Big win!    
        var link = JSON.parse(xhr.responseText).data.link;
        document.querySelector("#link").href = link;
        document.querySelector("#link").innerHTML = link;



        document.body.className = "uploaded";
    }
    // Ok, I don't handle the errors. An exercice for the reader.
    xhr.setRequestHeader('Authorization', 'Client-ID FOO');
    /* And now, we send the formdata */
    xhr.send(fd);
}

我鼓励您看一下文档，它非常友好，可以帮助您制作功能和东西...正如我所说的这是匿名上传，如果您想与用户一起上传图片，您必须先进行身份验证使用用户和密码，使用令牌并刷新它们，我没有这样做，但是一旦你了解了它的工作原理，它应该不会太复杂......

希望能帮助到你！！

于 2013-04-13T16:05:51.427 回答