绿满眶商城微信小程序-uniapp
peng
2025-07-09 c22e91296d532873b70cb51bf5510bf7738f3f1a
pages/mine/set/personMsg.vue
@@ -1,7 +1,8 @@
<template>
  <view class="person-msg">
    <view class="head c-content" @click="changeFace">
      <image :src="form.face || '/static/missing-face.png'" mode=""></image>
      <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
      <image v-else :src="'/static/missing-face.png'" mode=""></image>
      <view>点击修改头像</view>
    </view>
    <u-form :model="form" ref="uForm" class="form">
@@ -41,26 +42,26 @@
  </view>
</template>
<script>
import UForm from "@/uview-components/uview-ui/components/u-form/u-form.vue";
import UFormItem from "@/uview-components/uview-ui/components/u-form-item/u-form-item.vue";
import UInput from "@/uview-components/uview-ui/components/u-input/u-input.vue";
import URadioGroup from "@/uview-components/uview-ui/components/u-radio-group/u-radio-group.vue";
import URadio from "@/uview-components/uview-ui/components/u-radio/u-radio.vue";
import UPicker from "@/uview-components/uview-ui/components/u-picker/u-picker.vue";
import '@/components/uview-components/uview-ui';
import { getSTSToken } from "@/api/common.js";
import { saveUserInfo, getUserInfo } from "@/api/members.js";
import { upload } from "@/api/common.js";
import { getFileKey } from "@/utils/file.js";
import storage from "@/utils/storage.js";
import city from "@/components/m-city/m-city.vue";
export default {
  components: { UForm,UFormItem,UInput,URadioGroup,URadio,UPicker, "m-city": city },
  components: { "m-city": city },
  data() {
    return {
     cosClient: null,
     bucket: '',
     region: '',
     endpoint: '',
      lightColor: this.$lightColor, //高亮颜色
      form: {
        nickName: storage.getUserInfo().nickName || "",
        birthday: storage.getUserInfo().birthday || "",
        face: storage.getUserInfo().face || "/static/missing-face.png", //默认头像
        face: storage.getUserInfo().face, //默认头像
        regionId: [], //地址Id
        region: storage.getUserInfo().region || [], //地址
        sex: storage.getUserInfo().sex, //性别
@@ -84,7 +85,31 @@
      showBirthday: false, //显示生日日期
    };
  },
  onLoad() {
       this.initCOS()
  },
  methods: {
     // 初始化腾讯云cos客户端
     initCOS() {
        // 调用后端获取sts临时访问凭证
        getSTSToken().then(res => {
           const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
           // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
           // console.log(COS.version);  sdk 版本需要不低于 1.7.2
           this.cosClient = new COS({
              SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
              SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
              SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
              StartTime: res.data.data.stsStartTime, // 建议传入服务端时间,可避免客户端时间不准导致的签名错误
              ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
              SimpleUploadMethod: 'putObject', // 强烈建议,高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
            });
            this.bucket = res.data.data.bucket
            this.region = res.data.data.region
            this.endpoint = res.data.data.endpoint
        })
     },
     /**
      * 退出登录
      */
@@ -140,21 +165,30 @@
     */
    changeFace(index) {
      uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: upload,
            filePath: tempFilePaths[0],
            name: "file",
            header: {
              accessToken: storage.getAccessToken(),
            },
            success: (uploadFileRes) => {
              let data = JSON.parse(uploadFileRes.data);
              this.form.face = data.result;
            },
          });
          const tempFilePath = chooseImageRes.tempFilePaths[0];
        let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
        // 处理安卓可能的URI编码
        if(fileName.indexOf('%') > -1) {
         fileName = decodeURIComponent(fileName);
        }
        const fileKey = getFileKey(fileName);
          this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: tempFilePath,
               SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
           }, (err, data) => {
               if (err) {
                 console.log('上传失败', err);
               } else {
               this.form.face = fileKey;
            }
           });
        },
      });
    },
@@ -183,12 +217,8 @@
       url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
     });
   },
  },
  }
  /**
   * 加载数据
   */
  onLoad() {},
};
</script>
<style>