在Vue中,要獲取文件通常需要使用元素的change事件。通過change事件的回調函數,我們可以獲取用戶選擇的文件。
<template> <div> <input type="file" @change="onFileChange"> </div> </template> <script> export default { methods: { onFileChange(event) { const file = event.target.files[0]; // 處理文件,如上傳、讀取等操作 } } } </script>
通過event.target.files獲取用戶選擇的文件列表,每個文件都是一個File對象。
如果需要選擇多個文件,可以添加multiple屬性來允許選擇多個文件,如下所示:
<template> <div> <input type="file" multiple @change="onFileChange"> </div> </template>
如果需要限制文件類型和大小,可以使用accept和max-size屬性,如下所示:
<template> <div> <input type="file" accept=".jpg,.png" :max-size="1024 * 1024" @change="onFileChange"> </div> </template>
accept屬性指定文件類型,max-size屬性指定文件大小,單位為字節。上述示例只允許選擇大小不超過1MB的jpg和png文件。
上一篇css自制單選框
下一篇ajax異步刪除信息代碼