Carga de archivos

Carga de archivos. La biblioteca no incorpora un cliente HTTP: el prop request gestiona la transmisión real (onProgress comunica el progreso; la resolución de la Promise equivale al éxito). Admite el arrastre, la selección múltiple, las restricciones de cantidad / tamaño / tipo y el reintento tras un fallo.

Carga de archivos

<template>
  <div class="demo-col">
    <LhUpload
      multiple
      :max-count="3"
      :max-size="2097152"
      accept="image/*"
      :request="fakeRequest"
      @change="onChange"
      @success="onSuccess"
      @error="onError"
    >
      <LhButton type="primary">Seleccionar archivos (máx. 3, cada uno ≤ 2 MB)</LhButton>
    </LhUpload>
    <LhUpload drag :request="fakeRequest">
      <div style="padding: 20px 0">
        <p class="demo-note" style="font-size: 14px">Arrastra los archivos aquí o pulsa para cargarlos</p>
        <p class="demo-note">Admite el arrastre (modo drag)</p>
      </div>
    </LhUpload>
    <LhUpload multiple :max-count="5" accept=".png,.jpg" :request="fakeRequest" disabled>
      <LhButton disabled>Estado desactivado (accept en forma de arreglo .png/.jpg)</LhButton>
    </LhUpload>
    <p class="demo-note">Estado: {{ status }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    status: '(sin cargas)',
  }),
  methods: {
    fakeRequest(opts) {
      const { file, onProgress } = opts
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 25
          if (percent >= 100) {
            clearInterval(timer)
            onProgress(100)
            resolve({ url: `/assets/${file.name}` })
          } else {
            onProgress(percent)
          }
        }, 200)
      })
    },
    onChange(files) {
      this.status = `La lista contiene ${files.length} archivos`
    },
    onSuccess(file) {
      var _a
      this.status = `Carga correcta: ${(_a = file.name) !== null && _a !== void 0 ? _a : ''}`
    },
    onError(file, reason) {
      var _a
      this.status = `Error de carga: ${(_a = file.name) !== null && _a !== void 0 ? _a : ''} (${String(reason)})`
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
multiple	Selección múltiple	boolean	false
drag	Modo de carga por arrastre	boolean	false
disabled	Desactivado	boolean	false
accept	Tipos de archivo aceptados ('.png,.jpg' o un arreglo)	string \| string[]	—
maxSize	Tamaño máximo por archivo (bytes)	number	—
maxCount	Número máximo de archivos (0: sin límite)	number	0
request	Función de solicitud de carga (la biblioteca no incorpora un cliente HTTP)	LhUploadRequest	—
sx	Prop abreviada de maquetación	—	—

La firma de LhUploadRequest es (options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>: la resolución de la Promise dispara success, y el rechazo (o una excepción) dispara error.

Events

change (files)、success (file)、error (file, reason)、remove (uid)

Slots

Slot	Descripción
default	Contenido del área de activación (si se omite, se renderiza el aviso predeterminado «点击上传 / 拖到此处»)

Accesibilidad

El área de activación usa role="button" + tabindex (abre el selector de archivos con Enter / barra espaciadora), y aria-disabled indica el estado desactivado; las filas de los archivos en carga llevan role="progressbar" + aria-valuenow, y los avisos de error de validación usan role="alert".