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.

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.

    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove

    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

    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

    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

      Solo subida manual ​

      jpg/png files with a size less than 500kb

        API ​

        Atributos ​

        NombreDescripciónTipoPor defecto
        action requiredURL de solicitud.string#
        headerscabeceras de la petición.object—
        methodestablecer método de solicitud de subida.stringpost
        multiplesi se permite subir varios archivos.booleanfalse
        dataadditions options of request. support Awaitable data and Function since v2.3.13.object / Function{}
        namenombre de clave para el archivo subido.stringfile
        with-credentialssi se envían cookies.booleanfalse
        show-file-listsi desea mostrar la lista de archivos subidos.booleantrue
        dragsi activar el modo de arrastrar y soltar.booleanfalse
        acceptacepta tipos de archivos, puede no funcionar cuando thumbnail-mode === true.string''
        crossoriginnative attribute crossorigin.enum—
        on-previewfunción gancho al hacer clic en los archivos subidos.Function—
        on-removefunción gancho cuando se eliminan los archivos.Function—
        on-successfunción gancho cuando se sube con éxito.Function—
        on-errorfunción gancho cuando se producen algunos errores.Function—
        on-progressfunción gancho cuando se produce algún progreso.Function—
        on-changefunción gancho al seleccionar archivo o subir archivo con éxito o cargar archivo falla.Function—
        on-exceedfunción gancho cuando se supera el límite.Function—
        before-uploadfunció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-removehook 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-listarchivos subidos por defecto.object[]
        list-typetipo de lista de archivos.enumtext
        auto-uploadsi desea cargar el archivo automáticamente.booleantrue
        http-requestsobrescribe el comportamiento por defecto de xhr, permitiendo implementar su propia petición de carga de archivos.FunctionajaxUpload see
        disabledsi desea desactivar el upload.booleanfalse
        limitnúmero máximo de subidas permitidas.number—

        Slots ​

        NombreDescripciónTipo
        defaultpersonaliza el contenido por defecto.-
        triggercontenido que activa el diálogo de archivos.-
        tipcontenido de los tips.-
        filecontenido de la plantilla en miniatura.object

        Exposes ​

        NombreDescripciónTipo
        abortcancela la petición de carga.Function
        submitla lista de archivos se sube manualmente.Function
        clearFileslimpia la lista de archivos cargados (este método no está soportado en la función gancho before-upload).Function
        handleStartselecciona el archivo manualmente.Function
        handleRemoveelimina el archivo manualmente. archivo y rawFile han sido fusionados. rawFile se eliminará en v2.2.0.Function

        Type Declarations ​

        Show declarations
        ts
        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
}

        Fuente ​

        Componentes • Style • Documentación

        Contribuidores ​