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");

あなたのコードでは、ドラッグアンドドロップの例を使用したと仮定しているため、関数は次のようになります。

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 に答える