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(또는 throw)가 error 를 트리거합니다.

Events

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

Slots

슬롯	설명
default	트리거 영역 내용 (기본값으로 「업로드하려면 클릭 / 여기로 끌어다 놓기」 안내를 렌더링)

접근성

트리거 영역은 role="button" + tabindex(엔터/스페이스로 파일 창 열기 지원)이고 aria-disabled 로 비활성화를 표시합니다. 업로드 중인 파일 행에는 role="progressbar" + aria-valuenow 가 있고, 검증 실패 안내는 role="alert" 입니다.