Como subir imagenes a Cloudinary con Vue js

En este ejemplo te mostrare como subir imagenes a los servidores de Cloudinary para esto ya debes tener una cuenta creada. Este servicio nos brinda un plan gratis si tu prefieres usarlo para practicar.

Repositorio en Github enlace

En este caso estaremos usando el metodo Fetch de JavaScript pero si tu prefieres puedes usar axios.

1. Creamos un proyecto de Vuejs

En este caso estare utilizando el CLI pero tu puedes usar el cdn si prefieres.

vue create <nombre del proyecto>

2. Creamos un formulario.

Ahora crearemos en formulario con un input de tipo file y un boton con el evento change.

<form @submit.prevent="GuardarImagen()" method="post">
      <input type="file" @change="processFile($event)" />
      <button type="submit">subir imagen</button>
    </form>

3. Creamos la función para obtener los valores de la imagen

La función processFile recibe como parametro el evento y por medio de el podemos ver los valores de la imagen.

Algunos valores que podemos ver son: nombre, tamaño, tipo, etc.

<script>
export default {
  methods: {
    processFile(event) {
      this.imagen = event.target.files[0];
      console.log(this.imagen);
    }
  }
};
</script>

Al subir imagen de nuestro computador obtenemos por consola esto

4. Obtenemos la url

Para esto necesitamos ubicarnos en nuestro dashboard obtener la url o ruta para subir la imagen y el preset que servira para tener acceso a nuestra cuenta asi nadie podra subir la imagen hasta que tenga autorizacion o el “preset”

5. Obtenemos el preset

Para esto nos ubicamos en configuraciones>upload

Luego bajamos a la opción Upload Presets damos click en Enable unsigned uploading y el genera un preset que vamos a utilizar

6. Creamos la función para guardar nuestras imagenes en Cloudinary

Creamos la funcion GuardarImagen(), luego creamos una instancia formData en la cual llenamos la informacion de nuestra imagen y el preset

Ahora usaremos el metodo Fetch le damos el metodo y el body que seria la variable formData luego si tu prefieres puedes usar ASYNC/AWAIT

<script>
export default {
  data() {
    return {
       CLOUDINARY_URL: "coloca tu url",
      CLOUDINARY_UPLOAD_PRESET: "coloca tu preset",
      imagen: []
    };
  },
  methods: {
    processFile(event) {
      this.imagen = event.target.files[0];
      console.log(this.imagen);
    },
    GuardarImagen() {
      let formData = new FormData();
      formData.append("file", this.imagen); // le damos los datos de la imagen luego que se lleno en la funcion processFile()
      formData.append("upload_preset", this.CLOUDINARY_UPLOAD_PRESET); // le damos nuestro preset

      //subiendo imagen con fetch
      fetch(this.CLOUDINARY_URL, { method: "POST", body: formData })
        .then(response => response.json()) //convertimos la respuesta en json
        .then(data => console.log(data.url))// obtenemos la url de la imagen guardada
        .catch(error => console.log("ocurrio un error " , error)); //capturamos un posible error
    }
  }
};
</script><!--more-->

7. Obtenemos la url de la imagen como respuesta

Repositorio en Github enlace