uni-app 实现头像上传功能

在实现uni-app中的头像上传功能时，你可以利用uni-app提供的文件上传API以及前端组件来完成。以下是一个基本的实现步骤和相关代码案例。

1. 创建页面和组件

首先，在你的uni-app项目中创建一个页面（如pages/uploadAvatar/uploadAvatar.vue）来放置头像上传功能。

<template>
  <view>
    <image :src="avatarUrl" class="avatar" mode="aspectFit" @click="chooseImage"></image>
    <button @click="uploadAvatar">上传头像</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '' // 初始头像URL，可以为默认图片路径
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0]; // 设置选中的图片路径为头像URL
        }
      });
    },
    uploadAvatar() {
      if (!this.avatarUrl) {
        uni.showToast({
          title: '请先选择头像',
          icon: 'none'
        });
        return;
      }

      uni.uploadFile({
        url: 'https://your-server-upload-url.com/upload', // 后端接收文件的接口
        filePath: this.avatarUrl,
        name: 'avatar',
        formData: {
          user: 'test' // 其他表单数据，如用户ID等
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          if (data.success) {
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
            // 可根据后端返回的数据更新头像URL（如存储于服务器后的访问路径）
            // this.avatarUrl = data.avatarUrl;
          } else {
            uni.showToast({
              title: '上传失败：' + data.message,
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '上传失败：' + err.errMsg,
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 20px auto;
}
</style>

2. 配置和测试

• 确保你的后端服务器能够接收文件上传，并返回相应的成功或失败响应。
• 替换url字段中的https://your-server-upload-url.com/upload为你实际的后端上传接口地址。
• 在前端页面中，点击图片可以触发选择头像的操作，点击“上传头像”按钮则会上传已选择的头像到服务器。

以上代码展示了一个基本的头像上传功能实现，包括前端页面布局、图片选择和上传逻辑。根据实际需求，你可以进一步扩展和优化代码。