Rard-vue-element-upload2 NPM

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://git@bitbucket.org/eudiasrafael/rard-vue-element-upload.git
> cd rard-vue-element-upload
> npm install
> npm run dev

vue element.io upload base64

element-ui

1.0.0

6 years ago