File 類元件提供上傳檔案的 FileUpload 元件，可支援拖曳檔案事件，並同時上傳多個檔案以及選擇檔案後自動上傳等功能。

基本用法

<FileUpload> 基本的使用屬性設定包含：

1. mode 為 basic。
2. accept：可上傳的格式限制。
3. maxFileSize：檔案上傳容量上限。
4. url：檔案上傳的位置。
5. @upload：檔案上傳觸發的方法。

以下透過按鈕觸發 @click="upload" 方法上傳，FileUpload 元件觸發 @upload="onUpload" 則顯示上傳完成後的訊息。

// script
const fileupload = ref();

const upload = () => {
  fileupload.value.upload()
}

const onUpload = () => {
  toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 })
}

// template
<FileUpload
    ref="fileupload"
    mode="basic"
    name="demo[]"
    url="/api/upload"
    accept="image/*"
    :maxFileSize="1000000"
    @upload="onUpload"
/>
<Button label="上傳" @click="upload" severity="secondary" />

auto

加上 auto 屬性在選擇檔案後，會自動觸發上傳方法到 url 後端位置。

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

Advanced

使用 Advanced 模式，FileUpload 會提供移除按鈕及預覽檔案畫面，搭配空值時的顯示說明。
其中，multiple 表示可同時上傳多檔案。
在觸發 upload 事件時所執行的 onAdvancedUpload，其參數 $event 可取得上傳後的結果。

<FileUpload
    name="demo[]"
    url="/api/upload"
    @upload="onAdvancedUpload($event)"
    :multiple="true"
    accept="image/*"
    :maxFileSize="1000000"
>
    <template #empty>
      <span>可拖曳檔案到此處</span>
    </template>
</FileUpload>

客製上傳

希望在上傳時不透過設定 url 的方式，可自行客製化上傳的方法，範例如下：

1. 在 <FileUpload> 加上 :customUpload="true"
2. 將 emits 方法改為 @uploader，其中執行的函式所帶的參數 $event 可取得上傳的檔案，後續再依照自己的需求呼叫 API 上傳檔案。

<script setup>
...
const onCustomUpload = ($event) => {
  console.log($event)
  const formData = new FormData()
  formData.append('file', $event.files[0])
  // 發出 API 請求並夾帶 formData
  ...
}
</script>
<template>
  <main class="p-6">
      ...
      <FileUpload
        name="demo[]"
        @uploader="onCustomUpload($event)"
        :customUpload="true" // 改為客製上傳
        accept="image/*"
        :maxFileSize="1000000"
      >
        <template #empty>
          <span>可拖曳檔案到此處</span>
        </template>
      </FileUpload>
  </main>
</template>

參考連結：https://primevue.org/fileupload/