<input> type 型別為 file 時使得使用者可以選擇一個或多個元素以提交表單的方式上傳到伺服器上，或者通過JavaScript的 File API 對檔案進行操作 .

常用input屬性：

accept：指示file型別，沒有時表示不限制類型，填入格式後選擇檔案時只能看見被允許的檔案

accept="image/png" 或 accept=".png" 表示只接受 png 圖片.

accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" 表示接受 PNG/JPEG 檔案.

accept="image/*" 接受任何圖片檔案型別. audio/* 表示音訊檔案video/* 表示視訊檔案

accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 接受任何 MS Doc 檔案型別.

accept 屬性並不會驗證選中檔案的型別. 他只是為開發者提供了一種引導使用者做出期望行為的方式而已, 使用者還是有辦法繞過瀏覽器的限制。因此, 在伺服器端進行檔案型別驗證是必不可少的。

multiple：Boolean ，指示使用者能否多個輸入，type為email或file時生效

required：指定使用者在提交表單之前必須保證該元素值不為空。當 type 屬性是 hidden，image 或者按鈕型別（submit，reset，button）時不可使用。

:optional 和 :requiredcss偽元素的樣式將可以被該欄位應用作外觀。

事件：

change事件

廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com

示例

<template>
  <div>
    <input type="file" id="upload" multiple @change="upload"></input>
  </div>
</template>

<script>
  export default {
    methods: {
      upload(e) {
        // 獲取檔案資訊
        // 返回值是一個 FileList 物件,這個物件是一個包含了許多 File 檔案的列表(你也可以像列表一樣操作它).
        // 每個 File 物件包含了下列資訊: 
            // name: 檔名.
　　        // lastModified: UNIX timestamp 形式的最後修改時間.
　　        // lastModifiedDate: Date 形式的最後修改時間.
　　        // size: 檔案的位元組大小.
　　        // type: 檔案型別.
        // let files=document.getElementById(‘upload‘).files

        // 獲取單個檔案資訊
        let file = e.target.files[0]
        // 檔案資訊獲取後根據file.type判斷型別，根據file.size限制判斷大小,最後上傳，建議上傳單獨一個寫button
        const
 
 formdata = new FormData()
        formdata.append(‘file‘, file)
        // 調介面，data為formdata
      }
    }
  };
</script>