rard-vue-element-upload

Este componente permite fazer o upload de arquivos no VueJS 2, retornando o Base64 de cada um deles e com a aparência do Element.io.

Uso básico

JS

import RardVueElementUpload from rard-vue-element-upload

export default {
    name: 'Example',
    components: {
        RardVueElementUpload,
    },
    data () {
        return {
            files: []
        }
    },
}

HTML

<RardVueElementUpload v-model="files" />

Propriedaes

O componente possui diversas propriedades que permitem alterar sua aparência e comportamento. Veja alguns:

|Proriedade|Valores|Padrão|Descrição| |----------|-------|------|---------| |type|'files' ou 'images'|'files'|Muda a interface do componente caso o tipo de upload seja imagens ou arquivos gerais| |no-list|true ou false|false|Se não deve exibir uma lista dos arquivos selecionados/carregados| |allow-types|Qualquer String|Todos os MimeTypes|Mimetypes de arquivos que podem ser carregados. Ignorar permitirá todos os mimetypes |max-size|Qualquer Number|0 (Sem limite)|Estabelece o tamanho máximo (em bytes) que o arquivo pode ter |max|Qualquer Integer|0|Quantidade máxima de arquivos que podem ser carregados (0 == Ilimitado) |file-button-text|Qualquer String|'Selecionar'|Altera o texto do botão de upload do componente de tipo 'file'| |show-size|true ou false|true|Se o componente de tipo 'file' deve exibir o tamanho do arquivo carregado |image-height|Qualquer String|'100px'|Altura da miniatura da imagem carregada no componente de tipo 'image' |image-width|Qualquer String|'100px'|Largura da miniatura da imagem carregada no componente de tipo 'image' |image-icon-upload-size|Qualquer String|'5rem'|Tamanho do ícone de upload no componente de tipo 'image'

Eventos

O componente também possui alguns eventos úteis:

|Evento|Descrição|Parâmetro(s)| |------|---------|------------| |invalid|É executado sempre que um arquivo inválido for selecionado|Validação que estourou o evento e objeto do arquivo inválido| |add|É executado sempre que um novo arquivo for adicionado na lista|A lista de todos os objetos da lista | |remove|É executado sempre que um arquivo for removido da lista|Array contendo todos os objetos removidos|

Demostração (Demo)

Clone, configure e execute o projeto do BitBucket:

> git clone https://[email protected]/eudiasrafael/rard-vue-element-upload.git
> cd rard-vue-element-upload
> npm install
> npm run dev