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