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 個，單個 ≤ 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	單檔案大小上限（位元組）	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 / 空格開啟檔案框），aria-disabled 標明停用； 上傳中的檔案行帶 role="progressbar" + aria-valuenow，校驗失敗提示 role="alert"。