Carga de archivos

Suba archivos haciendo clic o arrastrando y soltando.

Uso básico

Carátula anterior

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

Control de lista de archivos

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

Arrastrar para cargar archivo

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

Solo subida manual

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.	`object`	[]
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`	—

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.	`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
}

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