Vue.js 是一個流行的 JavaScript 框架，支持在簡單的語法下構建交互式 Web 應用程序。本文將介紹如何在 Vue.js 應用程序中實現文件上傳功能。我們將使用 Axios 庫來發送 HTTP 請求，以便傳輸文件。

首先，我們需要在 Vue.js 項目中安裝 Axios。通過運行以下命令進行安裝：

npm install axios

然后，在 Vue 組件中導入 Axios：

import axios from 'axios'

接下來，我們在模板中添加一個文件上傳表單。我們可以使用 v-on:change 指令來監聽文件選擇事件：

<template>
<div>
<form enctype="multipart/form-data">
<input type="file" v-on:change="onFileChange">
<button v-on:click="uploadFile">上傳文件</button>
</form>
</div>
</template>

在 data 中定義一個變量來存儲選定的文件：

<script>
export default {
data () {
return {
selectedFile: null
}
},
methods: {
onFileChange (event) {
this.selectedFile = event.target.files[0]
},
uploadFile () {
let formData = new FormData()
formData.append('file', this.selectedFile)
axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
});
}
}
}
</script>

在 uploadFile 方法中，我們創建一個 FormData 對象，并將選定的文件附加到該對象中。然后，我們使用 Axios 發送一個 POST 請求，將 FormData 對象作為數據發送。我們在請求頭中設置 Content-Type 為 multipart/form-data，這是上傳文件所必需的。

到此為止，我們就可以在 Vue.js 應用程序中實現文件上傳功能了。希望這篇文章對學習 Vue.js 有所幫助。