You can’t be perfect but you can be unique.
你不能十全十美，但你能獨一無二。

今天的學習中，我們將探討檔案上傳功能，比較不同的套件與原生實作之間的差異。

HTML form 　File Upload

<form action="/action_page.php">
  <input type="file" id="myFile" name="filename">
  <input type="submit">
</form>

以上為最基本的文件上傳功能

PrimeVue File Upload VS. HTML form 　File Upload

PrimeVue 提供了強大的 FileUpload 组件，可以輕鬆在Vue.js 應用中實現文件上傳功能。有別於
傳統　HTML form File Upload ;以下為優點

1. 功能豐富
   • 多種樣式與主題
   • 進度條
   • 拖放功能
   • 預覽功能
   • 自定義驗證
   • 事件處理
2. 良好開發者體驗和使用者體驗

File Upload

先在　nexut.js 做好設定，開始製作　component

一般按鈕上傳檔案作法

  <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />

• mode="basic":
  　設定 FileUpload 的模式為「基本模式」，會顯示一個簡單的檔案選擇按鈕。
• name="demo[]":
  　指定上傳檔案的欄位名稱。在後端可以透過此名稱來取得上傳的檔案。
• url="/api/upload":
  　指定處理上傳請求的伺服器端 API 端點，瀏覽器會將檔案傳送到這個 URL。
• accept="image/*":
  　限制使用者只能選擇圖片類型的檔案。
• :maxFileSize="1000000":
  　設定允許上傳檔案的最大大小，單位為位元組。1000000 位元組等於是 1 MB。
• @upload="onUpload":
  　當檔案上傳成功或失敗時，會觸發 onUpload 事件，並將相關資訊傳遞給這個事件處理函式。
• :auto="true":
  　設定為自動上傳模式，也就是說，當使用者選擇檔案後，會立即開始上傳。
• chooseLabel="Browse":
  　自定義檔案選擇按鈕上的文字為「瀏覽」。

以上是相關解釋。

結合UI

要有　UI模式上傳檔案，主要是加入　template

<<FileUpload ...>
    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
  </template>
   <template #content="{ files, uploadedFiles, removeUploadedFileCallback,     removeFileCallback }">
  </template>
  <template #empty>
  </template>
</<FileUpload>

模板插槽 (Template Slots):

PrimeVue 的 FileUpload 组件提供了模板插槽以便自定義外觀：

#header:

用於定義檔案上傳元件的標題區域顯示的內容。
您可以使用這個插槽來包含選擇檔案、上傳檔案、清除選擇的按鈕等元素。
插槽會收到以下屬性：

• chooseCallback: 一個可以被調用的函數，用來觸發檔案選擇對話框。
• uploadCallback: 一個可以被調用的函數，用來啟動檔案上傳過程。
• clearCallback: 一個可以被調用的函數，用來清除所選的檔案。
• files: 包含目前所選檔案的陣列。

#content:

用於定義檔案上傳元件的主體區域顯示的內容。
您可以使用這個插槽來顯示有關所選檔案、上傳進度和任何錯誤訊息的資訊。
插槽會收到以下屬性：

• files: 包含目前所選檔案的陣列。
• uploadedFiles: 包含已經成功上傳的檔案的陣列。
• removeUploadedFileCallback: 一個可以被調用的函數，用來從列表中移除已上傳的檔案。
• removeFileCallback: 一個可以被調用的函數，用來從列表中移除所選的檔案。

#empty:

用於定義當沒有選擇任何檔案時顯示的內容。
您可以使用這個插槽來提供說明或佔位訊息。

參考資料：
１．W3C
https://www.w3schools.com/howto/howto_html_file_upload_button.asp
２．PrimeVue
https://v3.primevue.org/fileupload/