上傳頭像是現在很多網站都需要的功能，因為頭像展示不僅讓用戶更加直觀地認識到對方，同時也能提升交互體驗。而Vue的開發方式非常適合這種組件化的場景，使用Vue編寫一個上傳頭像的組件是非常容易實現的。

在Vue中，我們可以將一個大的應用程序拆分成多個小組件。那么，上傳頭像也是可以作為一個組件來實現的。在這個組件中，我們需要實現文件上傳、文件預覽、文件保存等功能。對于這些功能，我們可以使用Vue的template、computed、watch、methods等語法來快速實現。

Vue.component('upload-avatar',{
template: `
`,
data: function() {
return {
avatarUrl: ''
}
},
computed: {
avatarInput: function() {
return this.$refs.avatarInput
}
},
methods: {
handleFileChange: function() {
this.previewAvatar()
this.uploadAvatar()
},
previewAvatar: function() {
const file = this.avatarInput.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function() {
this.avatarUrl = reader.result
}.bind(this)
},
uploadAvatar: function() {
const file = this.avatarInput.files[0]
//上傳文件到服務器的代碼
}
}
})

上面的代碼定義了一個名為upload-avatar的組件，在模板中包含一個type為file的input和一個img標簽， 分別用來選擇文件和預覽用戶選擇的頭像。組件的data中包含一個avatarUrl變量，用來保存用戶選擇的頭像文件的URL。組件的computed中定義一個avatarInput方法，用來獲取當前上傳文件的input標簽。

定義了upload-avatar組件后，我們需要在Vue應用程序中使用該組件。由于使用組件的方式方式和使用HTML標簽一樣，所以我們只需要在HTML代碼中引入該組件即可。

上述代碼中，我們在一個id為app的div中插入了upload-avatar組件。定義完組件和引入組件后，我們只需要在組件中實現文件上傳、文件預覽等方法就可以實現一個基本功能的上傳頭像組件。