Vue是一款受歡迎的JavaScript框架，它被廣泛應用於前端開發當中。在Vue中，檔案上傳是一個很常見的需求，本文將介紹Vue上傳檔案的寫法。
一、安裝依賴
Vue檔案上傳需要使用axios和vue-router這兩個依賴，所以我們需要安裝這兩個依賴：
npm install axios vue-router --save
二、HTML程式碼
下面是Vue上傳檔案的HTML程式碼：
<template> <div> <input type="file" @change="onFileChange" /> <button @click="upload">上传</button> </div> </template>
其中，onFileChange是選擇檔案時觸發的事件，upload是點擊上傳按鈕時觸發的事件。
三、JavaScript程式碼
接下來，我們需要寫Vue的JavaScript程式碼：
<script>
import axios from 'axios'
import router from 'vue-router'
export default {
name: 'file-upload',
data () {
return {
file: null,
errorMsg: ''
}
},
methods: {
onFileChange (event) {
this.file = event.target.files[0];
},
upload () {
let formData = new FormData();
formData.append('file', this.file);
let token = localStorage.getItem('token');
if (token) {
axios.post('/api/upload', formData, {
headers: {
'Authorization': 'Bearer ' + token
}
})
.then(response => {
router.push('/success');
})
.catch(error => {
this.errorMsg = '上传文件失败';
})
}
}
}
}
</script>其中，我們先import了axios和vue-router依賴，然後定義了一個data對象，包含了file和errorMsg兩個屬性，分別表示檔案和錯誤訊息。
接著，我們定義了兩個方法：onFileChange和upload。 onFileChange方法會在選擇檔案時觸發，將選取的檔案儲存在data物件的file屬性中。 upload方法會在上傳按鈕被點擊時觸發，先建立一個FormData對象，然後透過axios.post方法向伺服器上傳文件，上傳成功後使用vue-router將頁面跳到成功頁面，在上傳過程中發生錯誤， errorMsg屬性被賦值為上傳檔案失敗。
四、總結
Vue上傳檔案的寫法相對較簡單，只需要了解axios和vue-router兩個依賴的用法，就能夠實現檔案上傳功能。希望本文的介紹能對大家有幫助。
以上是實例講解Vue怎麼實現上傳檔案功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
