Upload アップロード

ファイルアップロードです。ライブラリは HTTP クライアントを内蔵せず、request prop が実際の転送を引き受けます（onProgress が進捗を書き戻し、Promise が resolve すれば成功です）。ドラッグ、複数選択、数量 / サイズ / タイプの制約、失敗時の再試行をサポートします。

アップロード

<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">ファイルを選択（最大 3 つ、1 つあたり ≤ 2MB）</LhButton>
    </LhUpload>
    <LhUpload drag :request="fakeRequest">
      <div style="padding: 20px 0">
        <p class="demo-note" style="font-size: 14px">ここにファイルをドラッグするか、クリックしてアップロード</p>
        <p class="demo-note">ドラッグをサポート（drag モード）</p>
      </div>
    </LhUpload>
    <LhUpload multiple :max-count="5" accept=".png,.jpg" :request="fakeRequest" disabled>
      <LhButton disabled>無効状態（accept は配列形式 .png/.jpg）</LhButton>
    </LhUpload>
    <p class="demo-note">状態：{{ status }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    status: '（未アップロード）',
  }),
  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 = `リストは合計 ${files.length} 個のファイル`
    },
    onSuccess(file) {
      var _a
      this.status = `アップロード成功：${(_a = file.name) !== null && _a !== void 0 ? _a : ''}`
    },
    onError(file, reason) {
      var _a
      this.status = `アップロード失敗：${(_a = file.name) !== null && _a !== void 0 ? _a : ''}（${String(reason)}）`
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
multiple	複数選択	boolean	false
drag	ドラッグアップロードモード	boolean	false
disabled	無効	boolean	false
accept	受け付けるファイルタイプ（'.png,.jpg' または配列）	string \| string[]	—
maxSize	1 ファイルあたりのサイズ上限（バイト）	number	—
maxCount	ファイル数の上限（0 は無制限）	number	0
request	アップロードリクエスト関数（ライブラリは HTTP クライアントを内蔵しない）	LhUploadRequest	—
sx	sx によるレイアウト省略記法	—	—

LhUploadRequest のシグネチャ：(options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>—— Promise が resolve すると success、reject（または例外の送出）すると error が発火します。

Events

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

Slots

スロット	説明
default	トリガーエリアの内容（省略時は「クリックしてアップロード / ここにドラッグ」のヒントをレンダリング）

アクセシビリティ

トリガーエリアは role="button" + tabindex（Enter / Space でファイル選択ダイアログを開くことをサポート）で、aria-disabled が無効状態を示します。 アップロード中のファイル行には role="progressbar" + aria-valuenow が付き、バリデーション失敗のヒントは role="alert" です。