رفع الملفات Upload

رفع الملفات. لا تُضمَّن مكتبة عميل HTTP: يتولى prop الخاص بـ request النقل الفعلي (يعيد 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، ورفضه (أو طرحه استثناءً) يُطلق error.

Events

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

Slots

فتحة	الوصف
default	محتوى منطقة التشغيل (يُعرض افتراضيًا تلميح «انقر للرفع / اسحب إلى هنا»)

إمكانية الوصول

منطقة التشغيل role="button" + tabindex (تدعم فتح حوار الملفات بمفتاحَي الإدخال والمسافة)، وaria-disabled يُبيِّن التعطيل؛ صفوف الملفات أثناء الرفع تحمل role="progressbar" + aria-valuenow، ورسائل فشل التحقق تحمل role="alert".