## Carga de archivos
Carga archivos haciendo clic o arrastrándolos.
### Clic para cargar archivos
:::demo Personaliza el tipo y texto del botón utilizando la propiedad `slot`. Define las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifica un método para cuando el límite ha sido excedido.
```html
Clic para subir archivo
Solo archivos jpg/png con un tamaño menor de 500kb
```
:::
### Cargar avatar de usuario
Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
::: demo
```html
![]()
```
:::
### Pared de fotografías
Utiliza la propiedad `list-type` para cambiar el estilo a un listado de archivos.
::: demo
```html
![]()
```
:::
### Lista de archivos con miniatura
::: demo
```html
Clic para subir archivo
Solo archivos jpg/png con un tamaño menor de 500kb
```
:::
### Control de lista de archivos
Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
::: demo
```html
Clic para subir archivo
Solo archivos jpg/png con un tamaño menor de 500kb
```
:::
### Arrastrar para cargar archivo
Puedes arrastrar el archivo dentro de un área en especifico para cargar el archivo.
::: demo
```html
Suelta tu archivo aquí o haz clic para cargar
Solo archivos jpg/png con un tamaño menor de 500kb
```
:::
### Carga normal
::: demo
```html
Selecciona un archivo
Cargar al servidor
Solo archivos jpg/png con un tamaño menor de 500kb
```
:::
### Atributos
Atributo | Descripción | Tipo | Valores aceptados | Por defecto
----| ----| ----| ----| ----
action | obligatorio, URL de la petición | string | — | —
headers | cabeceras de la petición | object | — | —
multiple | permite subir múltiples archivos | boolean | — | —
data | opciones adicionales de la petición | object | — | —
name | nombre clave del archivo | string | — | file
with-credentials | permite enviar cookies | boolean | — |false
show-file-list | permite mostrar la lista de archivos cargados | boolean | — | true
drag | se permite activar el modo arrastrar y soltar | boolean | — | false
accept | acepta [tipos de archvios](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | —
on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | —
on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | —
on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | —
on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | —
on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | —
thumbnail-mode | permite mostrar la miniatura | boolean | — | false
file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
auto-upload | se permite autocargar archivos | boolean | — | true |
http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
disabled | permite deshabilitar la carga de archivos | boolean | — | false |
limit | número máximo de cargas permitidas | number | — | — |
on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
### Métodos
| Nombre del método | Descripción | Parametros |
|---------- |-------- |---------- |
| clearFiles | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | — |
| abort | cancela la petición de carga | （ file: fileList's item ） |