A vue3 ts base component for avatar upload and crop

✅ English JS Doc
✅ Lang pt-BR support
✅ Composable support - dynamic component

how to use

demo

codesandbox

Composition API

import { useAvatarUpload } from "@pkhadson/vue-avatar-upload";
import "@pkhadson/vue-avatar-upload/lib/style.css";

const avatarUpload = useAvatarUpload({
  color: "#ff5478",
  default: {
    // pass default props
  },
});

const openUpload = () => {
  avatarUpload({
    onCustomRequest: (file: File, close: Function) => {
      // upload flow
      close(); // close pop-up
    },
  });
};

import

  import VueAvatarUpload from '@pkhadson/vue-avatar-upload';
  import '@pkhadson/vue-avatar-upload/lib/style.css';

  <VueAvatarUpload
    :url="UPLOAD_AVATAR_URL"
    :headers="headers"
    :avatar="userStore.avatar"
    @error="handleError"
    v-show="show"
    @close="show = false"
    @success="handleSuccess"
  />

Props

interface AvatarUploadProps {
  /**
   * @description Initial image source
   */
  avatar?: string;
  /**
   * @description Image upload URL
   */
  url?: string;
  /**
   * @description Image upload field name
   */
  field?: string;
  /**
   * @description Upload file format
   */
  format?: string;
  /**
   * @description HTTP request headers to carry with the upload
   */
  headers?: Record<string, string>;
  /**
   * @description HTTP request data to carry with the upload
   */
  data?: Record<string, string>;
  /**
   * @description Image box width
   */
  width?: number;
  /**
   * @description Image box height
   */
  height?: number;
  /**
   * @description Initial size of the selection box
   */
  selectSize?: number;
  /**
   * @description Cross domain with cookie
   */
  withCredentials?: boolean;
  /**
   * @description Upload method
   */
  method?: 'POST' | 'GET';
  /**
   * @description Accepted file type
   */
  accept?: string;
  /**
   * @description Whether to still user operation selection box
   */
  disableSelect?: boolean;
  /**
   * @description Can rotate
   */
  rotate?: boolean;
  /**
   * @description Is fixed
   */
  fixed?: boolean;
  /**
   * @description Is show preview
   */
  showPreview?: boolean;
  /**
   * @description Preview box size
   */
  previewSize?: number;
  /**
   * @description Custom text i18n
   */
  i18?: I18;
  /**
   * @description Language
   */
  lang?: 'zh-CN' | 'zh-TW' | 'en';
  /**
   * @description Custom upload
   */
  onCustomRequest?: (file: File, close?: () => void) => void;
  /**
   * @description Upload before callback, if return false can prevent upload
   */
  onBefoureUpload?: (file: File) => boolean | Promise<boolean>;
  /**
   * @description Upload success callback
   */
  onSuccess?: (response: any, file: File) => void;
  /**
   * @description Upload fail callback
   */
  onError?: (err: Error, file: File, close?: () => void) => void;
  /**
   * @description Click close button
   */
  onClose?: () => void;
}

default value

  url: '',
  field: 'avatar',
  width: 300,
  height: 300,
  withCredentials: false,
  selectSize: 300,
  accept: 'image/*',
  method: 'POST',
  fixed: true,
  rotate: true,
  format: 'png',
  lang: 'zh-CN',
  showPreview: true,
  previewSize: 100,

language

built-in zh-CN | zh-TW | en | pt-BR you can use lang change the language or use i18 custom text

interface I18 {
  title: string
  changeAvatar: string
  rotate: string
  preview: string
  cancel: string
  confirm: string
}

slots