feat: 微信小程序支持上传头像

罗广辉

2026-05-08 626e8ccc9d05f4834f351779125145c49c99b2bb

feat: 微信小程序支持上传头像

 src/subPackages/userDetail/infos/index.vue

@@ -1,6 +1,7 @@
<template>
    <view class="container">
        <div class="avatarBox">

            <u-avatar @click="uploadAvatar" :src="userInfo.avatar" size="114" mode="aspectFill" />
        </div>
        <view class="detailBox">
@@ -34,18 +35,10 @@
</template>

<script setup>
    import {
        getEnvObj,
        getWebViewUrl
    } from "@/utils/index.js";
    import {
        getUserInfo,
        updateInfo,
        updatePassword
    } from '@/api/user/index.js';
    import {
        useUserStore
    } from "@/store/index.js";
import {getEnvObj} from "@/utils/index.js";
import {getUserInfo, updateInfo} from '@/api/user/index.js';
import {useUserStore} from "@/store/index.js";

    const userInfo = ref({
        id: '',
        avatar: '',
@@ -55,6 +48,7 @@
        email: '',
        deptName: '',
    });

    // 校验手机号
    const validatePhone = () => {
        const phone = userInfo.value.phone
@@ -71,6 +65,7 @@
        }
        return true
    }

    // 校验邮箱
    const validateEmail = () => {
        if (!userInfo.value.email) return true
@@ -86,6 +81,7 @@
        }
        return true
    }

    const getUserInfoData = () => {
        getUserInfo().then(res => {
            const user = res.data.data;
@@ -109,16 +105,12 @@
        VITE_API_BASE_URL
    } = getEnvObj()

// 头像上传到服务器
    function uploadUtil(options) {
        const {
            formData,
            filePath,
            url
        } = options;
  const {formData, filePath, url} = options;

        return new Promise((resolve, reject) => {
            let accessToken = useUserStore()?.$state?.userInfo?.access_token;

            uni.uploadFile({
                url: `${VITE_API_BASE_URL}${url}`,
                name: 'file',
@@ -132,8 +124,7 @@
                    if (resData.code === 200 || resData.code === 0) {
                        resolve(res)
                    } else {
                        showToast(resData.message)

          uni.showToast(resData.message)
                        reject(res)
                    }
                },
@@ -143,7 +134,40 @@
            });
        })
    }

// 上传头像功能
    const uploadAvatar = () => {
  // #ifdef MP-WEIXIN
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    maxDuration: 30,
    camera: 'back',
    success(res) {
      uploadUtil({
        filePath: res.tempFiles[0].tempFilePath,
        formData: {
          fileName: res.tempFiles[0].tempFilePath,
          sn: 'avatar_upload'
        },
        url: '/blade-resource/oss/endpoint/put-file'
      }).then(res => {
        const resData = JSON.parse(res.data);
        if (resData.code === 200 || resData.code === 0) {
          // 更新头像显示
          userInfo.value.avatar = resData.data.link || resData.data.url;
          uni.hideLoading();
          uni.showToast({title: '头像上传成功', icon: 'success'});
        } else {
          throw new Error(resData.message || '上传失败');
        }
      })
    }
  })
  // #endif

  // #ifndef MP-WEIXIN
        uni.chooseImage({
            count: 1,
            success: (res) => {
@@ -181,13 +205,9 @@
                        // 更新头像显示
                        userInfo.value.avatar = resData.data.link || resData.data.url;
                        uni.hideLoading();
                        uni.showToast({
                            title: '头像上传成功',
                            icon: 'success'
                        });
          uni.showToast({title: '头像上传成功', icon: 'success'});
                    } else {
                        throw new Error(resData.message || '上传失败');

                    }
                }).catch(err => {
                    uni.hideLoading();
@@ -198,6 +218,7 @@
                });
            }
        });
  // #endif
    }
    const submit = () => {
        if (!validatePhone() || !validateEmail()) return
@@ -219,9 +240,7 @@
                });
                    getUserInfoData()
            }

        });
	
    };
    onShow(async () => {
        getUserInfoData()
@@ -236,6 +255,7 @@
        flex-direction: column;
        align-items: center;
    }

    .avatarBox {
        width: 228rpx;
        height: 228rpx;
@@ -300,6 +320,7 @@
        width: 276rpx;
        height: 76rpx;
    }

    :deep(.u-button){
        width: 276rpx !important;
        height: 76rpx !important;