Vue LevidadeUploader

Este componente Vue.js oferece uma solução robusta para upload de arquivos, com suporte a arrastar e soltar, pré-visualização de arquivos, e validação de tipos MIME. Projetado para fácil integração, ele pode ser estendido e customizado conforme as necessidades de projetos maiores. É um código baseado no tutorial de Elijah Asaolu.

Como usar

Instalar

npm install vue-levidade-uploader

Usar componente localmente

// src/components/your-component.vue
<script setup>
...
import '../node_modules/vue-levidade-uploader/style.css'
import LevidadeUploader from '../node_modules/vue-levidade-uploader'
...
</script>
<template>
...
  <levidade-uploader />
...
</template>

Usar globalmente

No seu arquivo principal (main.js ou index.js), faça

import { createApp } from 'vue'
import App from './App.vue'
import LevidadeUploader from 'vue-levidade-uploader'
import 'vue-levidade-uploader/style.css'

const app = createApp(App);
app.component('levidade-uploader',LevidadeUploader)
app.mount('#app')

Então adicione ao seu template

<levidade-uploader />

Documentação da API

Gerar imagem miniatura do arquivo

generateThumbnail(file)

Obter o nome do arquivo

  file.name

| Parâmetro | Tipo | Default | Descrição | | :---------- | :--------- | :--------- | :---------------------------------- | | file.name | string | file.name | Obrigatório. Método nativo (ver em MDN) |

Obter nome do arquivo parcialmente omitido

  getNamePartiallyOmitted(name)

| Parâmetro | Tipo | Default | Descrição | | :---------- | :--------- | :--------- | :---------------------------------- | | file | object | file | Obrigatório. Referência do objeto (this.files). |

Saída:

// informado
getNamePartiallyOmitted(Loremipsumdolorsitamet.png)

// retorna
Loremi...itamet.png

| Parâmetro | Tipo | Default | Descrição | | :---------- | :--------- | :--------- | :---------------------------------- | | name | string | file.name | Obrigatório. Nome do arquivo | | excerptSize | integer | 6 | Opcional. Quantidade de caracteres exibidos no início e no final do nome. | | omission | string | ... | Obrigatório. Caractere usado para omitir um trecho do nome. |

Obter o tamanho do arquivo

  getFileSize(name)

| Parâmetro | Tipo | Default | Descrição | | :---------- | :--------- | :--------- | :---------------------------------- | | file | object | file | Obrigatório. Referência do objeto (this.files). |

| Variáveis | Tipo | Default | Descrição | | :---------- | :--------- | :--------- | :---------------------------------- | | units | array | 'Bytes', 'KB', 'MB', 'GB', 'TB' | Unidades de medida usadas para expressar o tamanho do arquivo. |

Obter a extensão do arquivo

  getFileExtension(file)

| Parâmetro | Tipo | Descrição | | :---------- | :--------- | :------------------------------------------ | | file | object | Obrigatório. Retorna a extensão do arquivo. |