添加avatar修改、聊天显示头像，聊天有消息提前

src/views/Chat.vue

@@ -8,7 +8,9 @@
   >
     <!-- 图片输入 -->
     <input type="file" @change="handleFileUpload" />
-      <el-button type="primary" size="default" @click="sendImageOrVideo" >发送</el-button>
+    <el-button type="primary" size="default" @click="sendImageOrVideo"
+      >发送</el-button
+    >
   </el-dialog>
 
   <el-container
@@ -25,9 +27,7 @@
         <el-menu :default-openeds="['1', '3']">
           <el-sub-menu index="1">
             <template #title>
-              <el-icon>
+              <el-icon> <message /> </el-icon>联系人
-                <message /> </el-icon
-              >联系人
             </template>
             <el-scrollbar height="300px">
               <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
@@ -36,7 +36,9 @@
                   @click="handleGetMessage(user.id)"
                   style="height: 40px"
                 >
+                <el-avatar style="float: left" :src="user.avatar"></el-avatar>
                   {{ user.name }}
+                  
                   <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
                 </el-menu-item>
               </el-menu-item-group>
@@ -47,7 +49,7 @@
               <el-icon><icon-menu /></el-icon>
               群组
             </template>
-            <el-scrollbar height="200px">
+            <el-scrollbar height="250px">
               <el-menu-item-group v-for="item in groupList" :key="item.ID">
                 <!-- <template #title>Group 1</template> -->
                 <el-menu-item
@@ -116,9 +118,10 @@
               style="margin-left: 10px; margin-bottom: 8px"
             >
               <el-row class="row-bg" type="flex" align="middle">
-                <el-avatar size="default" fit="fit">{{
+                <!-- <el-avatar size="default" fit="fit">{{
                   cur_user_name
-                }}</el-avatar>
+                }}</el-avatar> -->
+                <el-avatar size="default" :src="cur_user_avatar"></el-avatar>
                 <span style="margin-left: 10px"
                   >{{ cur_user_name }} : {{ formatTime(item.CreatedAt) }}</span
                 >
@@ -143,9 +146,17 @@
               </el-row>
 
               <el-row>
-                <el-col :span="1000" :offset="1" class="msg" style="max-width: 50%;">
+                <el-col
+                  :span="1000"
+                  :offset="1"
+                  class="msg"
+                  style="max-width: 50%"
+                >
                   <!-- {{ item.Msg }} -->
-                  <div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
+                  <div
+                    v-html="renderMarkdown(item.Msg)"
+                    style="max-width: 50%"
+                  ></div>
                 </el-col>
               </el-row>
             </div>
@@ -159,26 +170,34 @@
                   {{ tokenData.username }} :
                   {{ formatTime(item.CreatedAt) }}</span
                 >
-                <el-avatar size="default" fit="fit">
+                <el-avatar size="default" :src="tokenData.avatar"></el-avatar>
-                  {{ tokenData.username }}
-                </el-avatar>
               </el-row>
 
               <el-row justify="end">
-                <el-col :span="1000" class="msg2" style="margin-right: 20px; max-width: 50%;">
+                <el-col
+                  :span="1000"
+                  class="msg2"
+                  style="margin-right: 20px; max-width: 50%"
+                >
                   <!-- {{ item.Msg }} -->
-                  <div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
+                  <div
+                    v-html="renderMarkdown(item.Msg)"
+                    style="max-width: 50%"
+                  ></div>
                 </el-col>
               </el-row>
             </div>
           </div>
         </el-scrollbar>
       </el-main>
+      <div></div>
       <div>
-      </div>
+        <el-row
-      <div>  
+          class="row-bg"
-
+          type="flex"
-       <el-row class="row-bg" type="flex" justify="space-around" align="middle">
+          justify="space-around"
+          align="middle"
+        >
           <el-button
             type="primary"
             size="default"
@@ -217,12 +236,12 @@
 <script>
 import axios from "axios";
 import { inject } from "vue";
-import { ref } from 'vue';
+import { ref } from "vue";
 import { getFriendListService } from "@/api/chat.js";
 import { getMessageService } from "@/api/chat.js";
 import { sendMessageService } from "@/api/chat.js";
 import { UploadFileService } from "@/api/tool.js";
-import {GetFileInfoByMd5Service } from "@/api/tool.js";
+import { GetFileInfoByMd5Service } from "@/api/tool.js";
 
 import {
   ElAvatar,
@@ -241,8 +260,8 @@ import {
 import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
-import MarkdownIt from 'markdown-it';
+import MarkdownIt from "markdown-it";
-import CryptoJS from 'crypto-js';
+import CryptoJS from "crypto-js";
 
 export default {
   data() {
@@ -250,13 +269,17 @@ export default {
       ip: "",
       tableData: [],
       sendImgDialogVisible: false,
-      file : null,
+      file: null,
       file_md5: "",
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
+        avatar:
+          localStorage.getItem("avatar") === ""
+            ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
+            : localStorage.getItem("avatar"),
       },
       username: localStorage.getItem("username"),
       userList: [],
@@ -270,6 +293,7 @@ export default {
       md: new MarkdownIt(), //md解析器
 
       cur_user_name: "",
+      cur_user_avatar: "",
       eventSource: null, // 事件源
       uid: localStorage.getItem("userId"),
       currentMsg: "",
@@ -292,8 +316,13 @@ export default {
       let data = result.data;
       this.userList = data.friends;
       for (let i = 0; i < data.friends.length; i++) {
+        this.userList[i].avatar = data.friends[i].avatar ===""?"https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg" : data.friends[i].avatar;
         this.hasUnreadMsg[data.friends[i].id] = false;
       }
+      console.log("avatar: " + this.userList[0].avatar);
+      for (let i = 0; i < data.groups.length; i++) {
+        this.hasUnreadMsg["g_" + data.groups[i].ID] = false;
+      }
       this.groupList = data.groups;
     },
     filterUsers() {
@@ -360,6 +389,10 @@ export default {
       for (let i = 0; i < this.userList.length; i++) {
         if (this.userList[i].id === id) {
           this.cur_user_name = this.userList[i].name;
+          this.cur_user_avatar =
+            this.userList[i].avatar === ""
+              ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
+              : this.userList[i].avatar;
           break;
         }
       }
@@ -481,21 +514,40 @@ export default {
             // 如果是消息类型，解密消息内容
             // console.log("收到数据====" + JSON.stringify(msg.data));
             console.log("msg_:", data.data);
+            console.log("hasUnreadMsg:", _this.hasUnreadMsg);
             let msg_data = JSON.parse(data.data);
             _this.MsgList.push(msg_data);
-            if (
-              _this.cur_user_id != msg_data.FromUserID &&
-              _this.cur_group_id != msg_data.GroupID
-            ) {
             if (msg_data.GroupID === 0) {
+              //如果msg_data.GroupID === 0,则为用户消息
+              if (msg_data.FromUserID !== _this.cur_user_id) {
+                //如果不是是当前用户发送的消息，则设置为未读
                 _this.hasUnreadMsg[msg_data.FromUserID] = true;
+                //将当前用户移动到第一位
+                for (let i = 0; i < _this.userList.length; i++) {
+                  if (_this.userList[i].id === msg_data.FromUserID) {
+                    let temp = _this.userList[i];
+                    _this.userList.splice(i, 1); //删除当前用户
+                    _this.userList.unshift(temp); //将当前用户移动到第一位
+                    break;
+                  }
+                }
+              }
             } else {
+              if (msg_data.GroupID !== _this.cur_group_id) {
+                //如果不是是当前用户发送的消息，则设置为未读
                 _this.hasUnreadMsg["g_" + msg_data.GroupID] = true;
+                //将当前用户移动到第一位
+                for (let i = 0; i < _this.groupList.length; i++) {
+                  if (_this.groupList[i].ID === msg_data.GroupID) {
+                    let temp = _this.groupList[i];
+                    _this.groupList.splice(i, 1); //删除当前用户
+                    _this.groupList.unshift(temp); //将当前用户移动到第一位
+                    break;
+                  }
+                }
+              }
             }
-            } else {
             _this.scrollToBottom();
-            }
-
             //console.log("msglist:", _this.MsgList);
             // 构建消息内容
           } else if (data.type == "check") {
@@ -624,7 +676,7 @@ export default {
           };
           reader.readAsArrayBuffer(this.file);
         } catch (error) {
-          console.error('计算MD5值出错:', error);
+          console.error("计算MD5值出错:", error);
         }
       }
     },
@@ -632,7 +684,7 @@ export default {
     handleMenuSelect(val) {
       router.push(val);
       //关闭websocket
-      if (this.socket!= null) {
+      if (this.socket != null) {
         this.socket.close();
       }
     },
@@ -657,52 +709,53 @@ export default {
         reader.readAsArrayBuffer(this.file);
       });
     },
-    async sendImageOrVideo(){
+    async sendImageOrVideo() {
       if (this.file == null) {
-        alert('请先选择要上传的文件');
+        alert("请先选择要上传的文件");
         return;
       }
       //查看文件是否是图片或视频
 
       try {
-        let result={};
+        let result = {};
         this.file_md5 = await this.readFileAndCalculateMD5(this.file);
         //console.log("md5:",this.file_md5);
-        let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
+        let md5_result = await GetFileInfoByMd5Service({
-        if(md5_result.code === 0){
+          md5: this.file_md5,
+          token: this.tokenData.token,
+          type: 1,
+        });
+        if (md5_result.code === 0) {
           result = md5_result;
-        }else{
+        } else {
           let formData = new FormData();
-            formData.append('file', this.file);
+          formData.append("file", this.file);
           //console.log("add file: " + this.file);
-            formData.append('upload_type', "1");
+          formData.append("upload_type", "1");
-            formData.append('md5', this.file_md5);
+          formData.append("md5", this.file_md5);
-            formData.append('auth_type', "public");
+          formData.append("auth_type", "public");
           //console.log("formData:",formData);
 
-          
+          result = await UploadFileService(formData, this.tokenData.token);
-            result = await UploadFileService(formData,this.tokenData.token);
+          if (result.code !== 0) {
-            if (result.code!== 0) {
+            ElMessage.error("上传文件失败，请稍后再试");
-              ElMessage.error('上传文件失败，请稍后再试');
             return;
           }
         }
         let resp_data = result.data;
 
         //console.log("resp:",resp_data);
-        let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
+        let url = "https://gep.ljsea.top/tool/file/" + resp_data.FileStoreName;
-        let msg_ ="";
+        let msg_ = "";
         //markdown 图片格式
-        let fileType = this.file.name.split('.')[1];
+        let fileType = this.file.name.split(".")[1];
-          if (!['jpg', 'jpeg', 'png', 'gif', 'mp4'].includes(fileType)) {
+        if (!["jpg", "jpeg", "png", "gif", "mp4"].includes(fileType)) {
           //alert('请选择正确的图片或视频格式');
           msg_ = `文件：[${resp_data.FileName}](${url})`;
-          }else{
+        } else {
           msg_ = `![${resp_data.FileName}](${url})`;
-           
         }
 
- 
         let req = {
           token: localStorage.getItem("token"),
           ip: localStorage.getItem("ip"),
@@ -729,12 +782,12 @@ export default {
           Msg: msg_,
           CreatedAt: new Date(),
         };
-        console.log("msg:",msg);
+        console.log("msg:", msg);
         this.MsgList.push(msg);
         this.scrollToBottom();
         this.sendImgDialogVisible = false;
       } catch (error) {
-        ElMessage.error('上传文件时出现网络错误，请稍后再试');
+        ElMessage.error("上传文件时出现网络错误，请稍后再试");
         console.error(error);
       }
     },

src/views/UserList.vue

@@ -10,11 +10,13 @@ import {GetUserInfoService} from "@/api/user.js";
 import { GetRedisInfoService } from "@/api/tool.js";
 import {DelFGService} from "@/api/user.js";
 import router from "@/router/index.js";
+import { UploadFileService } from "@/api/tool.js";
+import {GetFileInfoByMd5Service } from "@/api/tool.js";
 import Cookies from "js-cookie";
 import { getFriendListService } from "@/api/chat.js";
 import {sendMessageService} from "@/api/chat.js";
 import { ElMessage } from 'element-plus';
-
+import CryptoJS from 'crypto-js';
 import Menu from "@/views/Menu.vue";
 
 export default {
@@ -30,6 +32,8 @@ export default {
       FriendsGRequestList:[],
       FriendsTableIsDisplay:false,
       RedisIsDisplay:false,
+      avatar_file: null,
+      file_md5: "",
       RedisList:[],
       FriendsGList:[],
       GroupList:[],
@@ -201,6 +205,76 @@ export default {
         console.log(e);
       }
     },
+    handleAvatarFileUpload(e) {
+      this.avatar_file = e.target.files[0];
+      //判断文件类型是否为图片
+      if (!this.avatar_file.type.startsWith("image/")) {
+        ElMessage.error("请选择图片文件");
+        this.avatar_file = null;
+        return;
+      }
+      //this.UserUpdateForm.avatar = URL.createObjectURL(this.avatar_file);
+      this.uploadAvatarFile();
+    },
+    readFileAndCalculateMD5() {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
+                const md5Hash = CryptoJS.MD5(wordArray);
+                const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
+                //console.log("onload: " + md5Str);
+                this.file_md5 = md5Str;
+                resolve(md5Str);
+            };
+            reader.onerror = (error) => {
+                reject(error);
+            };
+            reader.readAsArrayBuffer(this.avatar_file);
+        });
+    },
+    async uploadAvatarFile(){
+      if (this.avatar_file == null) {
+        alert('请先选择要上传的文件');
+        return;
+      }
+ 
+      try {
+        let result={};
+        this.file_md5 = await this.readFileAndCalculateMD5(this.avatar_file);
+        //console.log("md5:",this.file_md5);
+        let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
+        if(md5_result.code === 0){
+          result = md5_result;
+        }else{
+           let formData = new FormData();
+            formData.append('file', this.avatar_file);
+            //console.log("add file: " + this.file);
+            formData.append('upload_type', "1");
+            formData.append('md5', this.file_md5);
+            formData.append('auth_type', "public");
+            //console.log("formData:",formData);
+
+          
+            result = await UploadFileService(formData,this.tokenData.token);
+            if (result.code!== 0) {
+              ElMessage.error('上传文件失败，请稍后再试');
+              return;
+            }
+        }
+        let resp_data = result.data;
+
+        //console.log("resp:",resp_data);
+        let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
+
+        this.UserUpdateForm.avatar = url;
+        //更新用户信息
+        await this.updateUserInfo();
+      } catch (error) {
+        ElMessage.error('上传文件时出现网络错误，请稍后再试');
+        console.error(error);
+      }
+    },
     async updateUserInfo(){
       let result ={}
       try{
@@ -296,6 +370,7 @@ export default {
           this.UserUpdateForm.run = result.data.Run;
           this.UserUpdateForm.upload = result.data.Upload;
           this.UserUpdateForm.age = result.data.Age;
+          this.UserUpdateForm.avatar = result.data.Avatar === "" ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg":result.data.Avatar;
           this.UserUpdateForm.role = result.data.Role;
           this.UserUpdateForm.gender = result.data.Gender;
           this.UserUpdateForm.create_time = result.data.CreatedAt;
@@ -309,6 +384,7 @@ export default {
             localStorage.setItem("video_func",result.data.VideoFunc);
             localStorage.setItem("device_func",result.data.DeviceFunc);
             localStorage.setItem("cid_func",result.data.CIDFunc);
+            localStorage.setItem("avatar",result.data.Avatar);
             //console.log("my role:",this.role);
           }
         }
@@ -442,6 +518,11 @@ export default {
                       autocomplete="on"
                     ></el-input>
                   </el-form-item>
+                  <el-form-item label="头像" prop="name">
+                    <el-avatar :size="80" :src="UserUpdateForm.avatar"></el-avatar>
+                    <!-- 选择图片 -->
+                    <input type="file" @change="handleAvatarFileUpload">更换头像</input>
+                  </el-form-item>
                   <el-form-item label="用户名" prop="name">
                     <el-input
                       v-model="UserUpdateForm.name"