Téléversement

Téléversement de fichiers. La bibliothèque n'intègre pas de client HTTP : c'est la prop request qui prend en charge le transfert effectif (onProgress renvoie la progression, et la résolution de la Promise équivaut à un succès) ; le glisser-déposer, la sélection multiple, les contraintes de nombre / taille / type et le réessai après échec sont pris en charge.

Téléversement

<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">Choisir des fichiers (3 maximum, 2 Mo par fichier)</LhButton>
    </LhUpload>
    <LhUpload drag :request="fakeRequest">
      <div style="padding: 20px 0">
        <p class="demo-note" style="font-size: 14px">Glissez les fichiers ici, ou cliquez pour téléverser</p>
        <p class="demo-note">Glisser-déposer pris en charge (mode drag)</p>
      </div>
    </LhUpload>
    <LhUpload multiple :max-count="5" accept=".png,.jpg" :request="fakeRequest" disabled>
      <LhButton disabled>État désactivé (accept sous forme de tableau : .png, .jpg)</LhButton>
    </LhUpload>
    <p class="demo-note">État : {{ status }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    status: "(aucun téléversement)",
  }),
  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 liste contient ${files.length} fichier(s)`
    },
    onSuccess(file) {
      var _a
      this.status = `Téléversement réussi : ${(_a = file.name) !== null && _a !== void 0 ? _a : ''}`
    },
    onError(file, reason) {
      var _a
      this.status = `Échec du téléversement : ${(_a = file.name) !== null && _a !== void 0 ? _a : ''} (${String(reason)})`
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
multiple	Sélection multiple	boolean	false
drag	Mode de téléversement par glisser-déposer	boolean	false
disabled	Désactivé	boolean	false
accept	Types de fichiers acceptés ('.png,.jpg' ou tableau)	string \| string[]	—
maxSize	Taille maximale par fichier (octets)	number	—
maxCount	Nombre maximal de fichiers (0 = illimité)	number	0
request	Fonction de requête de téléversement (la bibliothèque n'intègre pas de client HTTP)	LhUploadRequest	—
sx	Propriétés de mise en page rapide	—	—

Signature de LhUploadRequest : (options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }> — la résolution de la Promise déclenche success, son rejet (ou une erreur levée) déclenche error.

Events

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

Slots

Slot	Description
default	Contenu de la zone de déclenchement (rendu par défaut : « cliquer pour téléverser / glisser ici »)

Accessibilité

La zone de déclenchement est role="button" + tabindex (Entrée / Espace ouvre le sélecteur de fichiers), et aria-disabled signale la désactivation ; les lignes des fichiers en cours de téléversement portent role="progressbar" + aria-valuenow, et les messages d'erreur de validation role="alert".