Cómo utilizar la API de carga de imágenes gratuita – imgur.com

Usando la API proporcionada por imgur.com, puede crear una función que le permita adjuntar imágenes a su blog o sitio web de forma gratuita.

Inscribirse

Si no se ha registrado como miembro, primero proceda con el registro de membresía en el siguiente sitio.

Imgur: La magia de Internet

Seleccione el botón Registrarse en la esquina superior derecha.

También puede registrarse fácilmente con otras cuentas sociales. Me registraré con mi cuenta de Google.

Ingrese su nombre de usuario y número de teléfono móvil y presione el botón Continuar.

Ingrese el número de 7 dígitos enviado a su teléfono móvil y presione el botón Registrar.

El registro se completa inmediatamente y pasará a la siguiente pantalla.

Registro de aplicaciones

Una vez que se completa el registro de membresía, el siguiente paso es pasar por el proceso de registro de la aplicación para cargar imágenes al servicio que desea.

Seleccione la API que se muestra en la parte inferior del sitio principal de imgur.com.

Luego verá la documentación de la API de Imgur de esta manera:

Si se desplaza un poco hacia abajo, verá un enlace para Registrar su aplicación, seleccionémosla.

Si quieres ir directamente a él, sólo tienes que hacer clic en el siguiente enlace.

Imgur – Registrar una aplicación

En la siguiente pantalla, completaremos los campos requeridos. Ingrese el nombre de aplicación apropiado y la URL del sitio que opera en la URL de devolución de llamada de Autorización. Parece que puede ingresar una dirección diferente, pero no estoy seguro de por qué. También ingresará su dirección de correo electrónico. Y haga clic en el botón enviar.

Si ingresó normalmente, puede obtener los valores de ID de cliente y Secreto de cliente de la siguiente manera. El valor que necesitamos es el ID de cliente. Asegúrese de anotar también el valor del secreto del cliente, ya que puede necesitarlo más adelante. Incluso si lo olvida, puede crear uno nuevo y usarlo más tarde si es necesario.

Cómo subir archivos

Esto se puede verificar fácilmente con el siguiente ejemplo. Ingrese el valor de ID de Cliente obtenido al registrar la aplicación en la 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>

Si la carga de la imagen es exitosa, se devuelve la siguiente información. Por lo tanto, es posible juzgar el éxito por el valor de éxito y mostrar la imagen real a través de la parte de enlace de los datos.

{
  "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
}

Esperamos que te sea útil.