Hapi.js + Vue.js avatar
En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.
Para subir la imagen se usará el siguiente método.
this.cropper
.getCroppedCanvas( this.outputOptions )
.toBlob( blob => {
new ApiFectch()
.updateAvatar( blob )
.then( response => {
if ( response.response ) {
success( response.message );
this.avatar = avatar + '?cache=' + new Date();
this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
} else {
error( response.message );
}
} );
} );
Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:
import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';
const state = {
avatar: null,
username: null,
};
const mutations = {
/**
* Sets avatar
*
* @param {Object} mutationState Vuex state.
* @param {String} avatar Avatar string.
*/
[ USER_SET_AVATAR ]( mutationState, avatar ) {
mutationState.avatar = avatar;
},
/**
* Sets username
*
* @param {Object} mutationState Vuex state.
* @param {String} username User name.
*/
[ USER_SET_USERNAME ]( mutationState, username ) {
mutationState.username = username;
},
};
export default {
namespaced: true,
state,
mutations,
};
Aquí está el código