在前端開發中，經常需要上傳文件。而Vue.js作為一款流行的前端框架，也提供了方便的上傳文件流操作。下面將簡單介紹Vue.js中如何上傳文件流。

在Vue.js中，上傳文件最常使用的是FormData類。這個類封裝了一系列用于處理需要提交表單數據，包括文件上傳的操作，它是原生JS中XMLHttpRequest的可讀寫數據流。當然，如果想要進行文件上傳，還需要引入File類型。

//HTML組件中增加input標簽//Vue.js組件內
data () {
return {
file: null
}
},
methods: {
fileChange (event) {
this.file = event.target.files[0]
},
submitFile () {
let formData = new FormData()
formData.append('file', this.file)
axios.post('/uploadFile', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response =>{
console.log(response)
})
}
}

以上代碼實現了上傳文件的基本操作，將formData和攜帶表頭信息的axios.post傳入URL即可上傳文件。值得注意的是，formData對象需要添加append方法后才能上傳文件。

如果要實現在上傳文件過程中顯示上傳進度，則需要使用axios中的onUploadProgress。這個方法會攜帶一個對象，其中包含了一個percent屬性，代表當前上傳的百分比。

submitFile () {
let formData = new FormData()
formData.append('file', this.file)
axios.post('/uploadFile', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent =>{
let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
console.log(percentCompleted)
}
}).then(response =>{
console.log(response)
})
}

使用這種方式實現上傳文件，在上傳文件的同時可以獲取上傳進度，方便用戶了解上傳進度。

總之，Vue.js提供方便的FormData類可以方便的上傳文件，再加上axios的onUploadProgress方法可以實時顯示上傳進度。這樣，上傳文件變得更加簡單方便。