javascript – Imgur API错误,如何使用XHR上传

    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支持.我可以知道如何修复它以上传图像吗？

解决方法:

你是对的…代码已经过时,所以我修复的方法是按照以下说明匿名上传图像：

1.-在FormData中,您只需附加图像,因此不应附加密钥

2.-您必须发送一个带有您的客户端ID的标头,我假设您已经拥有…我使用以下代码xhr.setRequestHeader(‘Authorization’,’Client-ID FOO’)执行此操作;
根据文档,它必须在打开XMLHttpRequest之后但在发送请求之前.

3.-当您尝试获取链接时,您必须解析JSON才能读取信息,链接将在数据节点中显示名称链接,因此解析将为：var link = JSON.parse(xhr. responseText的).data.link;

4.-您必须使用OAuth 2.0的新稳定API,因此上传图像的行应如下所示：xhr.open(“POST”,“https：//api.imgur.com/3/image. json“); …正如你所看到的,它只是更改数字,即版本,而不是上传它使用图像,它必须是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);
}

我鼓励你看看documentation,它非常友好,可以帮助你制作功能和东西…正如我所说这是匿名上传,如果你想与用户上传图像,你必须先验证用户和密码,使用令牌和刷新,我没有这样做,但一旦你了解它是如何工作的,它应该不会太复杂…

希望能帮助到你！！

标签：imgur,javascript,jquery,xmlhttprequest
来源： https://codeday.me/bug/20190901/1780196.html