现在你是前端开发工程师，现在你正在开发头像显示模块，要求是点击按钮后，进行选择文件上传，上传成功后显示上传的头像，请使用vue技术进行实现，并将完整代码输出出来

好的，以下是一个简单的 Vue 组件，实现了头像上传和显示的功能。代码如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange">
    <button @click="uploadAvatar">上传头像</button>
    <img v-if="avatarUrl" :src="avatarUrl" alt="头像">
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarFile: null, // 上传的头像文件
      avatarUrl: null, // 头像的 URL
    };
  },

  methods: {
    onFileChange(event) {
      this.avatarFile = event.target.files[0];
    },

    async uploadAvatar() {
      const formData = new FormData();
      formData.append('avatar', this.avatarFile);

      try {
        const response = await axios.post('/api/upload-avatar', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });

        this.avatarUrl = response.data.avatarUrl;
      } catch (error) {
        console.error('上传头像失败', error);
      }
    },
  },
};
</script>

这个组件包含一个文件选择框和一个上传按钮，当用户选择文件后，会将文件保存在组件的 data 中。点击上传按钮后，使用 axios 库将文件上传到服务器，并将服务器返回的头像 URL 保存在组件的 data 中。最后使用 `<img>` 标签显示头像。注意在上传文件时需要设置请求头部的 Content-Type 为 multipart/form-data，以支持上传文件。

以上是一个简单的 Vue 组件，实现了头像上传和显示的功能。该组件需要配合后端 API 使用，实现文件上传和保存头像的功能。