uniapp 自定义头像组件，可以修改大小样式

，支持上传图片

UniApp 自定义头像组件可以通过以下步骤实现：

1. 在 `components` 文件夹下创建一个名为 `avatar` 的组件文件夹。

2. 在 `avatar` 文件夹下创建一个名为 `avatar.vue` 的文件，用于编写头像组件的模板和样式。

3. 在 `avatar.vue` 文件中，添加一个 `img` 标签用于显示头像图片，以及一个 `slot` 插槽用于渲染头像下方的文字信息。同时，可以通过 `props` 定义组件的属性，如头像大小、形状、边框颜色等。

4. 在组件的 `methods` 中，添加一个 `uploadImage` 方法用于上传图片，并在 `mounted` 生命周期中初始化上传组件，监听上传成功事件并将上传的图片路径赋值给 `img` 标签的 `src` 属性。

5. 在页面中使用自定义头像组件时，可以通过 `props` 传递参数，如头像大小、形状、边框颜色等。同时，可以通过 `v-slot` 绑定插槽，传递头像下方的文字信息。

下面是一个简单的例子：

<!-- avatar.vue -->
<template>
  <div class="avatar-container">
    <img :src="imgSrc" :style="{ width: size + 'px', height: size + 'px', borderRadius: shape }">
    <slot></slot>
    <input type="file" ref="fileInput" style="display: none;" @change="uploadImage">
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 100
    },
    shape: {
      type: String,
      default: '50%'
    },
    borderColor: {
      type: String,
      default: '#ccc'
    }
  },
  data() {
    return {
      imgSrc: ''
    }
  },
  methods: {
    uploadImage() {
      const file = this.$refs.fileInput.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.imgSrc = reader.result
      }
    }
  },
  mounted() {
    const fileInput = this.$refs.fileInput
    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.imgSrc = reader.result
      }
    })
  }
}
</script>

<style scoped>
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<!-- my-page.vue -->
<template>
  <div>
    <avatar :size="200" shape="10px" borderColor="red">
      <div>My Avatar</div>
    </avatar>
  </div>
</template>

<script>
import Avatar from '@/components/avatar/avatar.vue'

export default {
  components: {
    Avatar
  }
}
</script>

在上面的例子中，自定义头像组件支持上传图片，并可以通过 `props` 定义头像的大小、形状、边框颜色等属性。在页面中使用时，可以通过 `v-slot` 绑定插槽传递头像下方的文字信息。