首页个人资料图片修改

src/views/home/user/index.vue

@@ -2,9 +2,11 @@
   <div class="wrap">
     <div class="title">个人资料</div>
     <div class="userinfo">
-      <div class="user-avatar">
-        <img :src="'/src/assets/images/avatar.jpg'" alt="" />
-      </div>
+      <a-upload :showUploadList="false" :multiple="false" :before-upload="beforeUpload">
+        <div class="user-avatar">
+          <img :src="avatar" alt="" />
+        </div>
+      </a-upload>
       <div class="username">{{ user.username }}</div>
       <div class="email">{{ user.email }}</div>
     </div>
@@ -45,12 +47,16 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getMyInfo, editMyInfo } from '/@/api/sys/user';
   import { useUserStore } from '/@/store/modules/user';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { Upload } from 'ant-design-vue';
+  import { uploadApi } from '/@/api/sys/upload';
 
   export default defineComponent({
     name: 'User',
-    components: {},
+    components: { [Upload.name]: Upload },
     setup() {
       const userStore = useUserStore();
+      const { imgUrlPrefix } = useGlobSetting();
       console.log(`userStore`, userStore);
       const { createMessage } = useMessage();
       const { success, error } = createMessage;
@@ -58,28 +64,50 @@
         username: '',
         nickname: '',
         email: '',
-        // avatar: 'https://img2.baidu.com/it/u=3033110424,3848444763&fm=26&fmt=auto&gp=0.jpg',
+        avatar: '',
         password: '',
       });
       const user = reactive({
         username: '',
         nickname: '',
         email: '',
+        avatar: '',
       });
       init(); // 初始化获取信息
       function init() {
         getMyInfo().then((res) => {
+          console.log(`res`, res);
           const data = res.row;
           userinfo.username = data.username;
           userinfo.nickname = data.nickname;
           userinfo.email = data.email;
+          userinfo.avatar = imgUrlPrefix + data.avatar;
           userinfo.password = '';
           user.nickname = data.nickname;
           user.username = data.username;
           user.email = data.email;
+          user.avatar = imgUrlPrefix + data.avatar;
           userStore.setUserInfo(data);
         });
       }
+      function beforeUpload(file) {
+        uploadApi({ file })
+          .then((res) => {
+            editMyInfo({ avatar: res.data.result.url })
+              .then(() => {
+                success('修改成功！');
+                init();
+              })
+              .catch((err) => {
+                error(err);
+              });
+          })
+          .catch((err) => {
+            error('头像修改失败');
+            console.log(`err`, err);
+          });
+        return false;
+      }
       function reset() {
         userinfo.username = user.username;
         userinfo.nickname = user.nickname;
@@ -106,6 +134,7 @@
       }
       return {
         reset,
+        beforeUpload,
         submit,
         user,
         ...toRefs(userinfo),