实现点击头像上传图片

src/pages/client/clientUser/editData.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="editData">
     <u-cell-group>
-      <u-cell size="large" title="头像" value="头像" isLink url="" />
+      <u-cell size="large" title="头像" value="头像" isLink url="" @click="onClickAvatar" />
       <u-cell size="large" title="用户名" value="yizhiyang" isLink url="" />
       <u-cell size="large" title="昵称" value="易只烊" isLink url="" />
       <u-cell size="large" title="性别" value="女" isLink url="" />
@@ -13,7 +13,67 @@
 </template>
 
 <script>
-export default {};
+export default {
+  methods: {
+    // 点击头像
+    async onClickAvatar() {
+      try {
+        const res = await uni.showActionSheet({
+          itemList: ['拍照', '从相册选择'],
+        });
+
+        if (res.tapIndex === 0) {
+          // 用户选择拍照
+          this.takePhoto();
+        } else if (res.tapIndex === 1) {
+          // 用户选择从相册选择
+          this.chooseImage();
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // 拍照
+    takePhoto() {
+      uni.chooseImage({
+        sourceType: ['camera'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+    //从相册中选择
+    chooseImage() {
+      uni.chooseImage({
+        sourceType: ['album'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+
+    // 上传头像
+    uploadAvatar(filePath) {
+      // 在这里实现上传头像的逻辑，将filePath作为参数传入
+
+      this.user_info.avatar = newImagePath;
+      this.$forceUpdate(); // 手动触发组件的重新渲染
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/client/tabBar/mine.vue

@@ -214,12 +214,13 @@ export default {
           url: '/pages/client/clientUser/serviceCenter',
         },
       ],
-      user_info: [], // 个人信息
+      user_info: {}, // 个人信息
+      avatar: '/pages/static', // 用于存储图片路径
     };
   },
 
-  mounted() {
-    this.handlerInitUserMessage();
+  async mounted() {
+    await this.handlerInitUserMessage();
   },
   methods: {
     // 获取当前用户信息
@@ -230,7 +231,62 @@ export default {
     },
 
     // 点击头像
-    onClickAvatar() {},
+    async onClickAvatar() {
+      try {
+        const res = await uni.showActionSheet({
+          itemList: ['拍照', '从相册选择'],
+        });
+
+        if (res.tapIndex === 0) {
+          // 用户选择拍照
+          this.takePhoto();
+        } else if (res.tapIndex === 1) {
+          // 用户选择从相册选择
+          this.chooseImage();
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // 拍照
+    takePhoto() {
+      uni.chooseImage({
+        sourceType: ['camera'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+    //从相册中选择
+    chooseImage() {
+      uni.chooseImage({
+        sourceType: ['album'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+
+    // 上传头像
+    uploadAvatar(filePath) {
+      // 在这里实现上传头像的逻辑，将filePath作为参数传入
+      const newImagePath = api.uploadImage(filePath);
+      this.user_info.avatar = newImagePath;
+      this.$forceUpdate(); // 手动触发组件的重新渲染
+    },
 
     // 点击跳转到全部订单
     gotoOrder(item) {