使用Vue讀取文件以及校驗是非常方便的。Vue提供了兩種方式來讀取文件：

1. 使用input標簽并綁定change事件

用戶選擇本地文件后，通過change事件獲取文件對象，使用FileReader讀取文件內容。

<template>
<input type="file" @change="handleFile">
</template>
<script>
export default {
methods: {
handleFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () =>{
const fileContent = reader.result;
console.log(fileContent);
};
reader.readAsText(file);
},
},
};
</script>

2. 使用vue-resource的$http對象

需要使用vue-resource插件，通過$http.get()方法讀取文件內容。

<script>
import VueResource from 'vue-resource';
export default {
mixins: [VueResource],
created() {
this.getFileContent('/path/to/file.txt');
},
methods: {
getFileContent(filePath) {
this.$http.get(filePath).then((response) =>{
console.log(response.body);
});
},
},
};
</script>

Vue也提供了校驗文件的方法：

1. 檢查文件類型

使用File對象的type屬性檢查文件類型是否符合要求。

2. 檢查文件大小

使用File對象的size屬性檢查文件大小是否符合要求。

<template>
<input type="file" @change="handleFile">
</template>
<script>
export default {
methods: {
handleFile(event) {
const file = event.target.files[0];
if (!file.type.includes('image/')) {
alert('請選擇圖片文件！');
return;
}
if (file.size >1024 * 1024) {
alert('請選擇小于1MB的圖片文件！');
return;
}
const reader = new FileReader();
reader.onload = () =>{
const fileContent = reader.result;
console.log(fileContent);
};
reader.readAsDataURL(file);
},
},
};
</script>