อัปโหลดไฟล์

คอมโพเนนต์อัปโหลดไฟล์ให้อินเทอร์เฟซที่ใช้งานง่ายสำหรับผู้ใช้ในการอัปโหลดไฟล์ผ่านทั้งการลากและวางและวิธีการเลือกไฟล์แบบดั้งเดิม รองรับการตรวจสอบประเภทไฟล์และขนาด และให้ข้อเสนอแนะภาพสำหรับข้อผิดพลาด

การใช้งานพื้นฐาน

คอมโพเนนต์อัปโหลดไฟล์มีสองวิธีในการอัปโหลดไฟล์:

คลิกปุ่ม "เรียกดูไฟล์" เพื่อเปิดตัวเลือกไฟล์
ลากและวางไฟล์โดยตรงลงในพื้นที่อัปโหลด

ไฟล์แนบ

or drop your file to upload

Supports: JPEG, PNG10MB maximum file size

vue

<template>
  <div>
    <spr-file-upload
      v-model="files1"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="ไฟล์แนบ"
      multiple
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

// เริ่มต้นอาร์เรย์ว่างเพื่อเก็บไฟล์ที่อัปโหลด
const files1 = ref([]);
</script>

คุณสมบัติสำคัญ

การตรวจสอบ: ตรวจสอบประเภทไฟล์และขนาดโดยอัตโนมัติ
หลายไฟล์: ใช้ prop multiple เพื่ออนุญาตให้อัปโหลดไฟล์หลายไฟล์
ข้อเสนอแนะ: ให้ข้อเสนอแนะภาพสำหรับสถานะข้อผิดพลาด
การจัดการไฟล์: อนุญาตให้แทนที่หรือลบไฟล์ที่อัปโหลดแล้ว

ประเภท

คอมโพเนนต์อัปโหลดไฟล์รองรับประเภทสำหรับสองรูปแบบเลย์เอาต์:

default: เลย์เอาต์แนวนอนมาตรฐานสำหรับพื้นที่ที่จำกัด
center: เลย์เอาต์แนวตั้งแบบศูนย์กลางพร้อมพื้นที่วางที่โดดเด่นมากขึ้น

อัปโหลดไฟล์เริ่มต้น

or drop your files to upload

Supports: JPEG, PNG10MB maximum file size

อัปโหลดไฟล์แบบศูนย์กลาง

or drop your files to upload

Supports: JPEG, PNG10MB maximum file size

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- เลย์เอาต์เริ่มต้น - แนวนอน -->
    <spr-file-upload
      v-model="files2"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์เริ่มต้น"
      multiple
    />

    <!-- เลย์เอาต์แบบศูนย์กลาง - แนวตั้งพร้อมพื้นที่วางที่โดดเด่นมากขึ้น -->
    <spr-file-upload
      v-model="files3"
      type="center"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์แบบศูนย์กลาง"
      multiple
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const files2 = ref([]);
const files3 = ref([]);
</script>

การเลือกเลย์เอาต์

ใช้เลย์เอาต์ default เมื่อพื้นที่จำกัดหรือสำหรับการอัปโหลดไฟล์แบบอินไลน์
ใช้เลย์เอาต์ center สำหรับพื้นที่อัปโหลดเฉพาะหรือเมื่อคุณต้องการเน้นฟังก์ชันการลากและวาง

สถานะปิดใช้งาน

คอมโพเนนต์อัปโหลดไฟล์สามารถปิดใช้งานเพื่อป้องกันการโต้ตอบของผู้ใช้ เมื่อปิดใช้งาน:

ปุ่มอัปโหลดไม่สามารถคลิกได้
ฟังก์ชันการลากและวางถูกปิดใช้งาน
คอมโพเนนต์แสดงด้วยสีที่หรี่ลง

อัปโหลดไฟล์เริ่มต้น

or drop your files to upload

Supports: JPEG, PNG10MB maximum file size

อัปโหลดไฟล์แบบศูนย์กลาง

or drop your files to upload

Supports: JPEG, PNG10MB maximum file size

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- เลย์เอาต์เริ่มต้นที่ปิดใช้งาน -->
    <spr-file-upload
      v-model="files4"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์เริ่มต้น"
      multiple
      disabled
    />

    <!-- เลย์เอาต์แบบศูนย์กลางที่ปิดใช้งาน -->
    <spr-file-upload
      v-model="files5"
      type="center"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์แบบศูนย์กลาง"
      multiple
      disabled
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const files4 = ref([]);
const files5 = ref([]);
</script>

เมื่อใดควรใช้สถานะปิดใช้งาน

ในระหว่างการส่งฟอร์มเพื่อป้องกันการอัปโหลดเพิ่มเติม
เมื่อผู้ใช้ไม่มีสิทธิ์ในการอัปโหลดไฟล์
เมื่อระบบกำลังประมวลผลไฟล์ที่อัปโหลดก่อนหน้านี้

การจัดการข้อผิดพลาด

คอมโพเนนต์อัปโหลดไฟล์มีฟังก์ชันการแสดงข้อผิดพลาดในตัวเพื่อให้ข้อเสนอแนะที่ชัดเจนแก่ผู้ใช้เมื่อการตรวจสอบล้มเหลว สถานการณ์การตรวจสอบทั่วไปประกอบด้วย:

ประเภทไฟล์ไม่รองรับ
ขนาดไฟล์เกินขนาดสูงสุดที่อนุญาต
กฎการตรวจสอบที่กำหนดเองอื่นๆ

อัปโหลดไฟล์เริ่มต้น

or drop your files to upload

ประเภทไฟล์ไม่รองรับ ต้องเป็นไฟล์ JPG หรือ PNG

อัปโหลดไฟล์แบบศูนย์กลาง

or drop your files to upload

ขนาดไฟล์ไม่ควรเกิน 10MB

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- ตัวอย่างข้อผิดพลาดประเภทไฟล์ -->
    <spr-file-upload
      v-model="files6"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์เริ่มต้น"
      multiple
      :show-error="true"
      :error-messages="['ประเภทไฟล์ไม่รองรับ ต้องเป็นไฟล์ JPG หรือ PNG']"
    />

    <!-- ตัวอย่างข้อผิดพลาดขนาดไฟล์ -->
    <spr-file-upload
      v-model="files7"
      type="center"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดไฟล์แบบศูนย์กลาง"
      multiple
      :show-error="true"
      :error-messages="['ขนาดไฟล์ไม่ควรเกิน 10MB']"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const files6 = ref([]);
const files7 = ref([]);

// ในแอปพลิเคชันจริง คุณจะตรวจสอบไฟล์และอัปเดตข้อความข้อผิดพลาด:
const validateFile = (file) => {
  if (!['image/jpeg', 'image/png'].includes(file.type)) {
    return 'ประเภทไฟล์ไม่รองรับ ต้องเป็นไฟล์ JPG หรือ PNG';
  }

  if (file.size > 10 * 1024 * 1024) {
    // 10MB ในหน่วยไบต์
    return 'ขนาดไฟล์ไม่ควรเกิน 10MB';
  }

  return null; // ไม่มีข้อผิดพลาด
};
</script>

การตรวจสอบประเภทไฟล์อัตโนมัติ

คอมโพเนนต์อัปโหลดไฟล์ตรวจสอบไฟล์ที่อัปโหลดโดยอัตโนมัติกับประเภทไฟล์ที่ยอมรับที่ระบุใน prop fileTypes เมื่อผู้ใช้พยายามอัปโหลดประเภทไฟล์ที่ไม่ถูกต้อง คอมโพเนนต์จะ:

กรองไฟล์ที่ไม่ถูกต้อง - เพิ่มเฉพาะไฟล์ที่ถูกต้องในโมเดล
ปล่อยข้อผิดพลาดการตรวจสอบ - เรียกเหตุการณ์ validation-error พร้อมข้อความข้อผิดพลาด
แสดงข้อเสนอแนะข้อผิดพลาด - แสดงข้อความข้อผิดพลาดเมื่อ showError เป็น true

อัปโหลดเฉพาะรูปภาพ (ลองอัปโหลด PDF หรือประเภทไฟล์อื่น)

or drop your files to upload

Supports: JPEG, PNG10MB maximum file size

vue

<template>
  <spr-file-upload
    v-model="filesValidation"
    :file-types="['image/jpeg', 'image/png']"
    :max-file-size="10"
    title="อัปโหลดเฉพาะรูปภาพ"
    multiple
    :show-error="showValidationError"
    :error-messages="validationErrorMessages"
    @validation-error="handleValidationError"
  />
</template>

<script setup>
import { ref } from 'vue';

const filesValidation = ref([]);
const showValidationError = ref(false);
const validationErrorMessages = ref([]);

const handleValidationError = (errors) => {
  validationErrorMessages.value = errors;
  showValidationError.value = errors.length > 0;

  // หรือไม่ก็ล้างข้อผิดพลาดหลังจากไม่กี่วินาที
  if (errors.length > 0) {
    setTimeout(() => {
      showValidationError.value = false;
      validationErrorMessages.value = [];
    }, 5000);
  }
};
</script>

พฤติกรรมการตรวจสอบ

ลากและวาง: ไฟล์ที่ไม่ถูกต้องจะถูกกรองออกโดยอัตโนมัติก่อนที่จะถูกเพิ่ม
ตัวเลือกไฟล์: ไฟล์ที่ไม่ถูกต้องจะถูกปฏิเสธและแสดงข้อความข้อผิดพลาด
หลายไฟล์: หากไฟล์บางไฟล์ถูกต้องและไฟล์อื่นๆ ไม่ถูกต้อง จะเพิ่มเฉพาะไฟล์ที่ถูกต้อง และข้อความข้อผิดพลาดจะแสดงรายการไฟล์ที่ไม่ถูกต้อง

การปรับแต่งป้ายกำกับประเภทไฟล์

โดยค่าเริ่มต้น คอมโพเนนต์จะแสดงรายการประเภทไฟล์ที่รองรับในพื้นที่อัปโหลด คุณสามารถปรับแต่งข้อความนี้โดยใช้ prop supportedFileTypeLabel

vue

<template>
  <!-- การแสดงประเภทไฟล์เริ่มต้น -->
  <spr-file-upload v-model="files" :file-types="['image/jpeg', 'image/png']" />

  <!-- ป้ายกำกับประเภทไฟล์ที่กำหนดเอง -->
  <spr-file-upload
    v-model="files"
    :file-types="['image/jpeg', 'image/png']"
    supportedFileTypeLabel="เฉพาะรูปภาพ JPG และ PNG"
  />

  <!-- ซ่อนป้ายกำกับพื้นที่วางทั้งหมด -->
  <spr-file-upload v-model="files" :file-types="['image/jpeg', 'image/png']" :hideDropzoneLabel="true" />
</template>

การจัดการไฟล์ที่อัปโหลดแล้ว

เมื่อไฟล์ถูกอัปโหลดแล้ว จะปรากฏในรายการด้านล่างพื้นที่อัปโหลด ผู้ใช้สามารถ:

แทนที่ ไฟล์แต่ละไฟล์: คลิก "แทนที่" จะเปิดตัวเลือกไฟล์เพื่อเลือกไฟล์ใหม่
ลบ ไฟล์: คลิกไอคอนถังขยะจะลบไฟล์ออกจากรายการ

vue

<template>
  <spr-file-upload
    v-model="uploadedFiles"
    :file-types="['application/pdf', 'image/jpeg', 'image/png']"
    :max-file-size="10"
    title="อัปโหลดเอกสาร"
    multiple
  />
</template>

<script setup>
import { ref, watch } from 'vue';

const uploadedFiles = ref([]);

// ตัวอย่างการดูการเปลี่ยนแปลงไฟล์ที่อัปโหลด
watch(uploadedFiles, (newFiles) => {
  console.log('ไฟล์ที่อัปเดต:', newFiles);

  // คุณสามารถประมวลผลไฟล์ที่นี่ เช่น เริ่มอัปโหลดไปยังเซิร์ฟเวอร์
  // หรือดำเนินการตรวจสอบเพิ่มเติม
});
</script>

ตัวบ่งชี้ความคืบหน้า

คอมโพเนนต์อัปโหลดไฟล์รองรับตัวบ่งชี้ความคืบหน้าเพื่อแสดงสถานะการอัปโหลด ใช้ prop show-progress เพื่อแสดงแถบความคืบหน้า และ progress-value เพื่อควบคุมเปอร์เซ็นต์ความคืบหน้า

อัปโหลดพร้อมความคืบหน้า

or drop your file to upload

Supports: JPEG, PNG10MB maximum file size

อัปโหลดเอกสารพร้อมความคืบหน้า

or drop your file to upload

Supports: PDF5MB maximum file size

ค่าความคืบหน้า: การอัปโหลด 1: 75% | การอัปโหลด 2: 45%

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- การอัปโหลดรูปภาพพร้อมความคืบหน้า -->
    <spr-file-upload
      v-model="filesProgress1"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="อัปโหลดพร้อมความคืบหน้า"
      :show-progress="true"
      :progress-value="progressValue1"
    />

    <!-- การอัปโหลดเอกสารพร้อมความคืบหน้า -->
    <spr-file-upload
      v-model="filesProgress2"
      type="center"
      :file-types="['application/pdf']"
      :max-file-size="5"
      title="อัปโหลดเอกสารพร้อมความคืบหน้า"
      :show-progress="true"
      :progress-value="progressValue2"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const filesProgress1 = ref([]);
const filesProgress2 = ref([]);

// จำลองค่าความคืบหน้า (ในแอปจริง ค่าเหล่านี้จะมาจากบริการอัปโหลด)
const progressValue1 = ref(75);
const progressValue2 = ref(45);
</script>

ไอคอนแสดงตัวอย่างไฟล์

คอมโพเนนต์อัปโหลดไฟล์แสดงไอคอนที่เหมาะสมสำหรับประเภทไฟล์ต่างๆ โดยอัตโนมัติ คุณสามารถควบคุมการมองเห็นไอคอนโดยใช้ prop hide-file-preview-icon

พร้อมไอคอนไฟล์ (ค่าเริ่มต้น)

or drop your files to upload

Supports: JPEG, PNG, PDF, TXT10MB maximum file size

ไม่มีไอคอนไฟล์

or drop your files to upload

Supports: JPEG, PNG, PDF, TXT10MB maximum file size

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- พร้อมไอคอนประเภทไฟล์ (พฤติกรรมเริ่มต้น) -->
    <spr-file-upload
      v-model="filesIcon1"
      type="default"
      :file-types="['image/jpeg', 'image/png', 'application/pdf', 'text/plain']"
      :max-file-size="10"
      title="พร้อมไอคอนไฟล์ (ค่าเริ่มต้น)"
      multiple
    />

    <!-- ไม่มีไอคอนประเภทไฟล์ -->
    <spr-file-upload
      v-model="filesIcon2"
      type="default"
      :file-types="['image/jpeg', 'image/png', 'application/pdf', 'text/plain']"
      :max-file-size="10"
      title="ไม่มีไอคอนไฟล์"
      multiple
      :hide-file-preview-icon="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const filesIcon1 = ref([]);
const filesIcon2 = ref([]);
</script>

ความคืบหน้าขั้นสูงพร้อมสถานะข้อผิดพลาด

คุณสามารถรวมตัวบ่งชี้ความคืบหน้าพร้อมสถานะข้อผิดพลาดเพื่อให้ข้อเสนอแนะการอัปโหลดที่ครอบคลุม

การอัปโหลดสำเร็จ

or drop your file to upload

Supports: JPEG, PNG10MB maximum file size

การอัปโหลดล้มเหลว

or drop your file to upload

การอัปโหลดล้มเหลว กรุณาลองใหม่อีกครั้ง

vue

<template>
  <div class="spr-flex spr-flex-col spr-gap-2">
    <!-- การอัปโหลดสำเร็จพร้อมความคืบหน้า -->
    <spr-file-upload
      v-model="filesAdvanced1"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="การอัปโหลดสำเร็จ"
      :show-progress="true"
      :progress-value="100"
    />

    <!-- การอัปโหลดล้มเหลวพร้อมความคืบหน้าและข้อผิดพลาด -->
    <spr-file-upload
      v-model="filesAdvanced2"
      type="default"
      :file-types="['image/jpeg', 'image/png']"
      :max-file-size="10"
      title="การอัปโหลดล้มเหลว"
      :show-progress="true"
      :progress-value="60"
      :show-error="true"
      :error-messages="['การอัปโหลดล้มเหลว กรุณาลองใหม่อีกครั้ง']"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const filesAdvanced1 = ref([]);
const filesAdvanced2 = ref([]);
</script>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
type	กำหนดรูปแบบเลย์เอาต์ของคอมโพเนนต์อัปโหลดไฟล์	'default' \| 'center'	'default'
title	ชื่อ/ป้ายกำกับที่แสดงเหนือคอมโพเนนต์อัปโหลดไฟล์	string	undefined
modelValue	อาร์เรย์ของไฟล์ที่อัปโหลดแล้ว ผูกกับ v-model	File[]	[]
multiple	เมื่อเป็น true อนุญาตให้อัปโหลดไฟล์หลายไฟล์พร้อมกัน	boolean	false
disabled	เมื่อเป็น true ปิดใช้งานฟังก์ชันอัปโหลดไฟล์	boolean	false
maxFileSize	ขนาดไฟล์สูงสุดที่อนุญาตในเมกะไบต์ (MB)	number	10
fileTypes	อาร์เรย์ของประเภท MIME ที่อนุญาตสำหรับการอัปโหลด (เช่น 'image/jpeg')	string[]	ประเภทเอกสารและรูปภาพทั่วไปทั้งหมด
showError	เมื่อเป็น true แสดงข้อความข้อผิดพลาดสำหรับไฟล์ที่ไม่ถูกต้อง	boolean	false
errorMessages	อาร์เรย์ของข้อความข้อผิดพลาดที่จะแสดงสำหรับความล้มเหลวในการตรวจสอบ	string[]	[]
hideFilePreviewIcon	เมื่อเป็น true ซ่อนไอคอนเครื่องหมายถูกถัดจากไฟล์ที่อัปโหลดแล้ว	boolean	false
hideDropzoneLabel	เมื่อเป็น true ซ่อนป้ายกำกับ "วางไฟล์ของคุณเพื่ออัปโหลด"	boolean	false
supportedFileTypeLabel	ข้อความที่กำหนดเองที่จะแสดงสำหรับประเภทไฟล์ที่รองรับ	string	สร้างอัตโนมัติตาม fileTypes
showProgress	เมื่อเป็น true แสดงแถบความคืบหน้าสำหรับสถานะการอัปโหลด	boolean	false
progressValue	ค่าความคืบหน้าเปอร์เซ็นต์ (0-100) สำหรับแถบความคืบหน้า	number	0

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
update:modelValue	ปล่อยออกมาหากไฟล์ถูกเพิ่ม แทนที่ หรือลบ	File[]: อาร์เรย์ไฟล์ที่อัปเดตแล้ว
validation-error	ปล่อยออกมาหากไฟล์ล้มเหลวในการตรวจสอบ (เช่น ประเภทไฟล์ไม่รองรับ) ปล่อยอาร์เรย์ว่างหากไฟล์ทั้งหมดถูกต้อง	string[]: อาร์เรย์ของข้อความข้อผิดพลาดที่อธิบายความล้มเหลวในการตรวจสอบ

ประเภทไฟล์ที่รองรับ

คอมโพเนนต์รองรับประเภทไฟล์ต่อไปนี้โดยค่าเริ่มต้น:

เอกสาร:

application/pdf - ไฟล์ PDF
application/msword - ไฟล์ MS Word
application/vnd.ms-excel - ไฟล์ MS Excel
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet - ไฟล์ XLSX
application/vnd.ms-powerpoint - ไฟล์ MS PowerPoint
text/plain - ไฟล์ข้อความ
text/csv - ไฟล์ CSV

รูปภาพ:

image/apng - Animated PNG
image/avif - รูปภาพ AVIF
image/gif - รูปภาพ GIF
image/jpeg - รูปภาพ JPEG
image/png - รูปภาพ PNG
image/svg+xml - รูปภาพ SVG
image/webp - รูปภาพ WebP

คุณสามารถระบุส่วนย่อยของประเภทเหล่านี้โดยใช้ prop fileTypes

การใช้ผลิตภัณฑ์

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล

เรดิโอ

เลือก

อัปโหลดไฟล์

การใช้งานพื้นฐาน

ประเภท

สถานะปิดใช้งาน

การจัดการข้อผิดพลาด

การตรวจสอบประเภทไฟล์อัตโนมัติ

การปรับแต่งป้ายกำกับประเภทไฟล์

การจัดการไฟล์ที่อัปโหลดแล้ว

ตัวบ่งชี้ความคืบหน้า

ไอคอนแสดงตัวอย่างไฟล์

ความคืบหน้าขั้นสูงพร้อมสถานะข้อผิดพลาด

API Reference

Props

Events

ประเภทไฟล์ที่รองรับ

การใช้ผลิตภัณฑ์

อัปโหลดไฟล์ ​

การใช้งานพื้นฐาน ​

ประเภท ​

สถานะปิดใช้งาน ​

การจัดการข้อผิดพลาด ​

การตรวจสอบประเภทไฟล์อัตโนมัติ ​

การปรับแต่งป้ายกำกับประเภทไฟล์ ​

การจัดการไฟล์ที่อัปโหลดแล้ว ​

ตัวบ่งชี้ความคืบหน้า ​

ไอคอนแสดงตัวอย่างไฟล์ ​

ความคืบหน้าขั้นสูงพร้อมสถานะข้อผิดพลาด ​

API Reference ​

Props ​

Events ​

ประเภทไฟล์ที่รองรับ ​

การใช้ผลิตภัณฑ์ ​

อัปโหลดไฟล์

การใช้งานพื้นฐาน

ประเภท

สถานะปิดใช้งาน

การจัดการข้อผิดพลาด

การตรวจสอบประเภทไฟล์อัตโนมัติ

การปรับแต่งป้ายกำกับประเภทไฟล์

การจัดการไฟล์ที่อัปโหลดแล้ว

ตัวบ่งชี้ความคืบหน้า

ไอคอนแสดงตัวอย่างไฟล์

ความคืบหน้าขั้นสูงพร้อมสถานะข้อผิดพลาด

API Reference

Props

Events

ประเภทไฟล์ที่รองรับ

การใช้ผลิตภัณฑ์