:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded.
:::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
```html
<el-upload
<el-upload
class="upload-demo"
class="upload-demo"
...
@@ -137,8 +137,8 @@ Upload files by clicking or drag-and-drop
...
@@ -137,8 +137,8 @@ Upload files by clicking or drag-and-drop
:limit="3"
:limit="3"
:on-exceed="handleExceed"
:on-exceed="handleExceed"
:file-list="fileList">
:file-list="fileList">
<el-buttonsize="small"type="primary">Click to upload</el-button>
<el-buttonsize="small"type="primary">Clic para subir archivo</el-button>
<divslot="tip"class="el-upload__tip">jpg/png files with a size less than 500kb</div>
<divslot="tip"class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
</el-upload>
</el-upload>
<script>
<script>
exportdefault{
exportdefault{
...
@@ -155,7 +155,7 @@ Upload files by clicking or drag-and-drop
...
@@ -155,7 +155,7 @@ Upload files by clicking or drag-and-drop
console.log(file);
console.log(file);
},
},
handleExceed(files,fileList){
handleExceed(files,fileList){
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length+fileList.length} totally`);
this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length+fileList.length}`);
}
}
}
}
}
}
...
@@ -163,9 +163,9 @@ Upload files by clicking or drag-and-drop
...
@@ -163,9 +163,9 @@ Upload files by clicking or drag-and-drop
```
```
:::
:::
### User avatar upload
### Cargar avatar de usuario
Use `before-upload` hook to limit the upload file format and size.
Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
::: demo
::: demo
```html
```html
...
@@ -221,10 +221,10 @@ Use `before-upload` hook to limit the upload file format and size.
...
@@ -221,10 +221,10 @@ Use `before-upload` hook to limit the upload file format and size.
constisLt2M=file.size/1024/1024<2;
constisLt2M=file.size/1024/1024<2;
if(!isJPG){
if(!isJPG){
this.$message.error('Avatar picture must be JPG format!');
this.$message.error('La imagen debe estar en formato JPG!');
}
}
if(!isLt2M){
if(!isLt2M){
this.$message.error('Avatar picture size can not exceed 2MB!');
this.$message.error('La imagen excede los 2MB!');
}
}
returnisJPG&&isLt2M;
returnisJPG&&isLt2M;
}
}
...
@@ -234,9 +234,9 @@ Use `before-upload` hook to limit the upload file format and size.
...
@@ -234,9 +234,9 @@ Use `before-upload` hook to limit the upload file format and size.
```
```
:::
:::
### Photo Wall
### Pared de fotografías
Use `list-type` to change the fileList style.
Utiliza la propiedad `list-type` para cambiar el estilo a un listado de archivos.
::: demo
::: demo
```html
```html
...
@@ -272,7 +272,7 @@ Use `list-type` to change the fileList style.
...
@@ -272,7 +272,7 @@ Use `list-type` to change the fileList style.
```
```
:::
:::
### FileList with thumbnail
### Lista de archivos con miniatura
::: demo
::: demo
```html
```html
...
@@ -283,8 +283,8 @@ Use `list-type` to change the fileList style.
...
@@ -283,8 +283,8 @@ Use `list-type` to change the fileList style.
:on-remove="handleRemove"
:on-remove="handleRemove"
:file-list="fileList2"
:file-list="fileList2"
list-type="picture">
list-type="picture">
<el-buttonsize="small"type="primary">Click to upload</el-button>
<el-buttonsize="small"type="primary">Clic para subir archivo</el-button>
<divslot="tip"class="el-upload__tip">jpg/png files with a size less than 500kb</div>
<divslot="tip"class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
</el-upload>
</el-upload>
<script>
<script>
exportdefault{
exportdefault{
...
@@ -306,9 +306,9 @@ Use `list-type` to change the fileList style.
...
@@ -306,9 +306,9 @@ Use `list-type` to change the fileList style.
```
```
:::
:::
### File list control
### Control de lista de archivos
Use `on-change` hook function to control upload file list
Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
::: demo
::: demo
```html
```html
...
@@ -317,8 +317,8 @@ Use `on-change` hook function to control upload file list
...
@@ -317,8 +317,8 @@ Use `on-change` hook function to control upload file list
data | additions options of request | object | — | —
data | opciones adicionales de la petición | object | — | —
name | key name for uploaded file | string | — | file
name | nombre clave del archivo | string | — | file
with-credentials | whether cookies are sent | boolean | — |false
with-credentials | permite enviar cookies | boolean | — |false
show-file-list | whether to show the uploaded file list | boolean | — | true
show-file-list | permite mostrar la lista de archivos cargados | boolean | — | true
drag | whether to activate drag and drop mode | boolean | — | false
drag | se permite activar el modo arrastrar y soltar | boolean | — | false
accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is`true` | string | — | —
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 function when clicking the uploaded files | function(file) | — | —
on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | —
on-remove | hook function when files are removed | function(file, fileList) | — | —
on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | —
on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | —
on-error | hook function when some errors occurs | function(err, file, fileList) | — | —
on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | —
on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
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) | — | —
