Carga de archivos

Suba archivos haciendo clic o arrastrando y soltando.

Uso básico

Personalice el tipo y texto del botón utilizando el slot. Defina las propiedades limit y on-exceed para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido. Además, puede abortar el proceso de quitar un archivo con el gancho before-remove.

jpg/png files with a size less than 500KB.

element-plus-logo.svg
element-plus-logo2.svg

Carátula anterior

Establezca límit y on-exceed para reemplazar automáticamente el archivo anterior cuando seleccione un nuevo archivo.

limit 1 file, new file will cover the old file

Avatar de usuario

Utilice el hook before-upload para limitar el formato de archivo y su tamaño.

Pared de fotografías

Utilice la propiedad list-type para cambiar el estilo a un listado de archivos.

Miniaturas personalizadas

Use scoped-slot para cambiar la plantilla de miniatura predeterminada.

Lista de archivos con miniatura

jpg/png files with a size less than 500kb

food.jpeg
food2.jpeg

Control de lista de archivos

Use la función gancho on-change para controlar la lista de archivos subidos.

jpg/png files with a size less than 500kb

food.jpeg
food2.jpeg

Arrastrar para cargar archivo

Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.

Drop file here or click to upload

jpg/png files with a size less than 500kb

Upload Directory 2.13.1

Enable folder upload via the directory prop.

After enabling it, only folders can be selected, and after selecting a folder, the files within the folder will be flattened.

Drop directory here or click to upload

Solo subida manual

jpg/png files with a size less than 500kb

API

Atributos

Nombre	Descripción	Tipo	Por defecto
action required	URL de solicitud.	`string`	#
headers	cabeceras de la petición.	`object`	—
method	establecer método de solicitud de subida.	`string`	post
multiple	si se permite subir varios archivos.	`boolean`	false
data	additions options of request. support `Awaitable` data and `Function` since v2.3.13.	`object` / `Function`	{}
name	nombre de clave para el archivo subido.	`string`	file
with-credentials	si se envían cookies.	`boolean`	false
show-file-list	si desea mostrar la lista de archivos subidos.	`boolean`	true
drag	si activar el modo de arrastrar y soltar.	`boolean`	false
accept	acepta tipos de archivos, puede no funcionar cuando `thumbnail-mode === true`.	`string`	''
crossorigin	native attribute crossorigin.	`enum`	—
on-preview	función gancho al hacer clic en los archivos subidos.	`Function`	—
on-remove	función gancho cuando se eliminan los archivos.	`Function`	—
on-success	función gancho cuando se sube con éxito.	`Function`	—
on-error	función gancho cuando se producen algunos errores.	`Function`	—
on-progress	función gancho cuando se produce algún progreso.	`Function`	—
on-change	función gancho al seleccionar archivo o subir archivo con éxito o cargar archivo falla.	`Function`	—
on-exceed	función gancho cuando se supera el límite.	`Function`	—
before-upload	función gancho anterior a subir el archivo ese archivo subido será el parámetro. Si se devuelve `falso` o se devuelve una `Promise` y luego se rechaza, la subida se cancelará.	`Function`	—
before-remove	hook lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada.	`Function`	—
file-list / v-model:file-list	archivos subidos por defecto.	`array`	[]
list-type	tipo de lista de archivos.	`enum`	text
auto-upload	si desea cargar el archivo automáticamente.	`boolean`	true
http-request	sobrescribe el comportamiento por defecto de xhr, permitiendo implementar su propia petición de carga de archivos.	`Function`	ajaxUpload see
disabled	si desea desactivar el upload.	`boolean`	false
limit	número máximo de subidas permitidas.	`number`	—
directory 2.13.1	whether to support uploading directory. After enabling it, only folders can be selected, and after selecting a folder, the files within the folder will be flattened.	`boolean`	false

Slots

Nombre	Descripción	Tipo
default	personaliza el contenido por defecto.	-
trigger	contenido que activa el diálogo de archivos.	-
tip	contenido de los tips.	-
file	contenido de la plantilla en miniatura.	`object`

Exposes

Nombre	Descripción	Tipo
abort	cancela la petición de carga. When a `file` is specified, abort the corresponding pending upload; when no file is specified, abort all pending uploads.	`Function`
submit	la lista de archivos se sube manualmente.	`Function`
clearFiles	limpia la lista de archivos cargados (este método no está soportado en la función gancho `before-upload`).	`Function`
handleStart	selecciona el archivo manualmente.	`Function`
handleRemove	elimina el archivo manualmente. `archivo` y `rawFile` han sido fusionados. `rawFile` se eliminará en `v2.2.0`.	`Function`

Type Declarations

Show declarations

type UploadFiles = UploadFile[]

type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> &
  Partial<Pick<UploadFile, 'status' | 'uid'>>

type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail'

type Awaitable<T> = Promise<T> | T

type Mutable<T> = { -readonly [P in keyof T]: T[P] }

interface UploadFile {
  name: string
  percentage?: number
  status: UploadStatus
  size?: number
  response?: unknown
  uid: number
  url?: string
  raw?: UploadRawFile
}

interface UploadProgressEvent extends ProgressEvent {
  percent: number
}

interface UploadRawFile extends File {
  uid: number
  isDirectory?: boolean
}

interface UploadRequestOptions {
  action: string
  method: string
  data: Record<string, string | Blob | [string | Blob, string] | string[]>
  filename: string
  file: UploadRawFile
  headers: Headers | Record<string, string | number | null | undefined>
  onError: (evt: UploadAjaxError) => void
  onProgress: (evt: UploadProgressEvent) => void
  onSuccess: (response: any) => void
  withCredentials: boolean
}