文件上傳是Web應(yīng)用程序中常見的功能之一。Vue可以輕松地實(shí)現(xiàn)文件上傳功能，讓我們來(lái)看看如何使用Vue的input文件上傳功能。

要使用Vue的文件上傳功能，我們需要使用“input”標(biāo)簽。在Vue中，“input”標(biāo)簽有一個(gè)獨(dú)特的屬性v-model，可以呈現(xiàn)相應(yīng)的數(shù)據(jù)。

<template>
<div>
<input v-model="selectedFile" type="file" @change="handleFileUpload" />
<button @click="uploadFile">Upload</button>
</div>
</template>

在上面的代碼中，我們使用了一個(gè)“input”標(biāo)簽，并為它添加了一個(gè)v-model屬性，這個(gè)屬性將會(huì)存儲(chǔ)我們選擇的文件。我們還添加了一個(gè)@change事件，這個(gè)事件在選擇文件時(shí)會(huì)被觸發(fā)。我們還在HTML中添加了一個(gè)“button”標(biāo)簽并為它添加了@click事件，當(dāng)我們點(diǎn)擊這個(gè)按鈕時(shí)，它將會(huì)向服務(wù)器上傳文件。

我們還需要在Vue實(shí)例中定義三個(gè)方法：handleFileUpload、uploadFile和filterFileType。這些方法將協(xié)同工作以實(shí)現(xiàn)文件上傳功能。

<script>
export default {
data() {
return {
selectedFile: null
};
},
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0];
},
uploadFile() {
if (!this.filterFileType(this.selectedFile)) {
alert("Only PDF files are allowed");
return;
}
const fd = new FormData();
fd.append("file", this.selectedFile);
axios
.post("http://localhost:3000/upload-file", fd, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(res =>{
console.log(res);
})
.catch(err =>{
console.log(err);
});
},
filterFileType(file) {
return file.type === "application/pdf";
}
}
};
</script>

上面的代碼中定義了三個(gè)方法：

• handleFileUpload方法從選定的文件中獲取文件并將其存儲(chǔ)在Vue實(shí)例中的selectedFile字段中。
• filterFileType方法是一個(gè)篩選器，我們可以在這里定義允許上傳的文件類型（在本例中是PDF文件）。如果用戶嘗試上載不允許的文件類型，則“uploadFile”方法會(huì)顯示錯(cuò)誤消息并退出。
• uploadFile方法將文件數(shù)據(jù)存儲(chǔ)在一個(gè)FormData對(duì)象中，并使用axios將其上傳到服務(wù)器。您需要根據(jù)您的后端實(shí)現(xiàn)修改URL（本例中是"http://localhost:3000/upload-file"）。

這就是如何使用Vue的input文件上傳功能。使用這些方法，您可以輕松地向服務(wù)器上傳您的文件。請(qǐng)記住，您必須對(duì)文件上傳處理方法進(jìn)行深思熟慮，并使用適當(dāng)?shù)陌踩胧源_保上傳的文件不會(huì)為您的Web應(yīng)用程序帶來(lái)任何危險(xiǎn)。