Como usar a API de upload gratuito de imagens – imgur.com

Usando a API fornecida pelo imgur.com, você pode criar uma função que permite anexar imagens ao seu blog ou site gratuitamente.

Inscrever-se

Se você não se registrou como membro, prossiga com o registro de membro primeiro no site a seguir.

Imgur: A magia da Internet

Selecione o botão Inscrever-se no canto superior direito.

Você também pode se inscrever facilmente com outras contas sociais. Vou me inscrever com minha conta do Google.

Digite seu nome de usuário e número de telefone celular e pressione o botão Continuar.

Digite o número de 7 dígitos enviado para o seu celular e pressione o botão Registrar.

O registro é concluído imediatamente e você será movido para a tela a seguir.

Registro do aplicativo

Após a conclusão do registro de associação, a próxima etapa é passar pelo processo de registro do aplicativo para fazer upload de imagens para o serviço desejado.

Selecione a API mostrada na parte inferior do site principal do imgur.com.

Você verá a documentação da API do Imgur assim:

Se você rolar um pouco para baixo, verá um link para Registrar seu aplicativo, vamos selecioná-lo.

Se você quiser ir diretamente para ele, basta clicar no link a seguir.

Imgur – Registre um aplicativo

Na próxima tela, preencheremos os campos obrigatórios. Insira o nome do aplicativo apropriado e a URL do site que você opera na URL de retorno de chamada de autorização. Parece que você pode inserir um endereço diferente, mas não sei por quê. Você também inserirá seu endereço de e-mail. E clique no botão enviar.

Se você entrou normalmente, poderá obter os valores de ID do cliente e Segredo do cliente da seguinte maneira. O valor que precisamos é o ID do cliente. Certifique-se de anotar também o valor do segredo do cliente, pois você pode precisar dele mais tarde. Mesmo se você esquecer, você pode criar um novo e usá-lo mais tarde, se necessário.

Como fazer upload de arquivos

Isso pode ser facilmente verificado com o exemplo a seguir. Insira o valor de ID do cliente obtido ao registrar o aplicativo na parte xxxxxxxxxx.

<input type="file" id="upload_image">
<button onclick="uploadImageTest()">upload</button>
<script>
    function uploadImageTest() {
        var bodyData = new FormData();
        var imageFile = document.querySelector("#upload_image").files[0];
        bodyData.append("image", imageFile);
        fetch("https://api.imgur.com/3/image", {
            method: "POST",
            headers: {
                Authorization: "Client-ID xxxxxxxxxxxxxxx",
                Accept: "application/json",
            },
            body: bodyData,
        }).then(function(res){
            return res.json();
        }).then(function(json){
            console.log(json);
        });
    }
</script>

Se o upload da imagem for bem-sucedido, as informações a seguir serão retornadas. Portanto, é possível julgar o sucesso pelo valor de sucesso e mostrar a imagem real através da parte do link dos dados.

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1495556889,
    "type": "image/gif",
    "animated": false,
    "width": 1,
    "height": 1,
    "size": 42,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "x70po4w7BVvSUzZ",
    "name": "",
    "link": "http://i.imgur.com/orunSTu.gif"
  },
  "success": true,
  "status": 200
}

Espero que você ache útil.