fix: 发送多种图片异常的bug

im-uniapp/pages/chat/chat-box.vue

@@ -188,7 +188,7 @@ export default {
 				// 更新消息
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 				// 会话置顶
 				this.moveChatToTop();
 				// 滚动到底部
@@ -335,12 +335,12 @@ export default {
 						tmpMessage.id = m.id;
 						tmpMessage.status = m.status;
 						tmpMessage.content = m.content;
-						this.chatStore.insertMessage(tmpMessage, chat);
+						this.chatStore.updateMessage(tmpMessage, chat);
 					}).catch(() => {
 						// 更新消息
 						tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
 						tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-						this.chatStore.insertMessage(tmpMessage, chat);
+						this.chatStore.updateMessage(tmpMessage, chat);
 					})
 				}
 			})
@@ -460,7 +460,7 @@ export default {
 				data.width = size.width;
 				data.height = size.height;
 				msgInfo.content = JSON.stringify(data)
-				this.chatStore.insertMessage(msgInfo, chat);
+				this.chatStore.updateMessage(msgInfo, chat);
 				this.scrollToBottom();
 			})
 			return true;
@@ -473,13 +473,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadImageFail(file, err) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onUploadFileBefore(file) {
 			// 检查是否被封禁
@@ -526,13 +526,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadFileFail(file, res) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onResendMessage(msgInfo) {
 			if (msgInfo.type != this.$enums.MESSAGE_TYPE.TEXT) {
@@ -557,12 +557,12 @@ export default {
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
 				tmpMessage.content = m.content;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).catch(() => {
 				// 更新消息
 				tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			})
 		},
 		onDeleteMessage(msgInfo) {

im-uniapp/store/chatStore.js

@@ -497,21 +497,29 @@ export default defineStore('chatStore', {
 			if (!chat) {
 				return null;
 			}
-			for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-				// 通过id判断
-				if (msgInfo.id && chat.messages[idx].id) {
-					if (msgInfo.id == chat.messages[idx].id) {
-						return chat.messages[idx];
+			// 通过id判断
+			if (msgInfo.id) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
+					let m = chat.messages[idx];
+					if (m.id && msgInfo.id == m.id) {
+						return m;
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.id > chat.messages[idx].id) {
+					if (m.id && m.id < msgInfo.id) {
 						break;
 					}
 				}
-				// 正在发送中的消息可能没有id,只有tmpId
-				if (msgInfo.tmpId && chat.messages[idx].tmpId) {
-					if (msgInfo.tmpId == chat.messages[idx].tmpId) {
-						return chat.messages[idx];
+			}
+			// 正在发送中的消息可能没有id,只有tmpId
+			if (msgInfo.tmpId) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
+					let m = chat.messages[idx];
+					if (m.tmpId && msgInfo.tmpId == m.tmpId) {
+						return m;
+					}
+					// 如果id比要查询的消息小，说明没有这条消息
+					if (m.tmpId && m.tmpId < msgInfo.tmpId) {
+						break;
 					}
 				}
 			}

im-web/src/components/chat/ChatBox.vue

@@ -163,13 +163,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onImageFail(e, file) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onImageBefore(file) {
 			// 被封禁提示
@@ -208,7 +208,7 @@ export default {
 				data.width = size.width;
 				data.height = size.height;
 				msgInfo.content = JSON.stringify(data)
-				this.chatStore.insertMessage(msgInfo, chat);
+				this.chatStore.updateMessage(msgInfo, chat);
 				this.scrollToBottom();
 			})
 		},
@@ -226,13 +226,13 @@ export default {
 				msgInfo.status = m.status;
 				this.isReceipt = false;
 				this.refreshPlaceHolder();
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onFileFail(e, file) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onFileBefore(file) {
 			// 被封禁提示
@@ -384,7 +384,7 @@ export default {
 				// 更新消息
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 				// 会话置顶
 				this.moveChatToTop();
 				// 保持输入框焦点
@@ -397,7 +397,7 @@ export default {
 				this.refreshPlaceHolder();
 			}).catch(() => {
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, this.chat);
+				this.chatStore.updateMessage(tmpMessage, this.chat);
 			})
 		},
 		fillTargetId(msgInfo, targetId) {
@@ -483,11 +483,11 @@ export default {
 					tmpMessage.id = m.id;
 					tmpMessage.status = m.status;
 					tmpMessage.content = m.content;
-					this.chatStore.insertMessage(tmpMessage, chat);
+					this.chatStore.updateMessage(tmpMessage, chat);
 				}).catch(() => {
 					// 更新消息
 					tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-					this.chatStore.insertMessage(tmpMessage, chat);
+					this.chatStore.updateMessage(tmpMessage, chat);
 				}).finally(() => {
 					this.isReceipt = false;
 					resolve();
@@ -522,11 +522,11 @@ export default {
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
 				tmpMessage.content = m.content;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).catch(() => {
 				// 更新消息
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).finally(() => {
 				this.scrollToBottom();
 			});

im-web/src/components/chat/ChatMessageItem.vue

@@ -23,10 +23,7 @@
 						<span class="message-text" v-if="isTextMessage" v-html="htmlText"></span>
 						<div class="message-image" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"
 							@click="showFullImageBox()">
-							<div v-loading="sending" element-loading-text="发送中.."
-								element-loading-background="rgba(0, 0, 0, 0.4)">
 								<img :style="imageStyle" :src="contentData.thumbUrl" loading="lazy" />
-							</div>
 						</div>
 						<div class="message-file" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
 							<div class="chat-file-box" v-loading="sending">

im-web/src/store/chatStore.js

@@ -294,7 +294,7 @@ export default defineStore('chatStore', {
 			let chat = this.findChatByFriend(friend.id);
 			// 更新会话中的群名和头像
 			if (chat && (chat.headImage != friend.headImage ||
-				chat.showName != friend.nickName)) {
+					chat.showName != friend.nickName)) {
 				chat.headImage = friend.headImage;
 				chat.showName = friend.nickName;
 				chat.stored = false;
@@ -305,7 +305,7 @@ export default defineStore('chatStore', {
 			let chat = this.findChatByFriend(user.id);
 			// 更新会话中的昵称和头像
 			if (chat && (chat.headImage != user.headImageThumb ||
-				chat.showName != user.nickName)) {
+					chat.showName != user.nickName)) {
 				chat.headImage = user.headImageThumb;
 				chat.showName = user.nickName;
 				chat.stored = false;
@@ -315,7 +315,7 @@ export default defineStore('chatStore', {
 		updateChatFromGroup(group) {
 			let chat = this.findChatByGroup(group.id);
 			if (chat && (chat.headImage != group.headImageThumb ||
-				chat.showName != group.showGroupName)) {
+					chat.showName != group.showGroupName)) {
 				// 更新会话中的群名称和头像
 				chat.headImage = group.headImageThumb;
 				chat.showName = group.showGroupName;
@@ -466,7 +466,8 @@ export default defineStore('chatStore', {
 								// 冷热消息合并
 								let chat = Object.assign({}, coldChat, hotChat);
 								if (hotChat && coldChat) {
-									chat.messages = coldChat.messages.concat(hotChat.messages)
+									chat.messages = coldChat.messages.concat(hotChat
+										.messages)
 								}
 								// 历史版本没有readedMessageIdx字段，做兼容一下
 								chat.readedMessageIdx = chat.readedMessageIdx || 0;
@@ -522,21 +523,28 @@ export default defineStore('chatStore', {
 			if (!chat) {
 				return null;
 			}
-			for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-				// 通过id判断
-				if (msgInfo.id && chat.messages[idx].id) {
-					if (msgInfo.id == chat.messages[idx].id) {
-						return chat.messages[idx];
+			if (msgInfo.id) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
+					let m = chat.messages[idx];
+					if (m.id && msgInfo.id == m.id) {
+						return m;
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.id > chat.messages[idx].id) {
+					if (m.id && m.id < msgInfo.id) {
 						break;
 					}
 				}
-				// 正在发送中的消息可能没有id,只有tmpId
-				if (msgInfo.tmpId && chat.messages[idx].tmpId) {
-					if (msgInfo.tmpId == chat.messages[idx].tmpId) {
-						return chat.messages[idx];
+			}
+			// 正在发送中的消息可能没有id,只有tmpId
+			if (msgInfo.tmpId) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
+					let m = chat.messages[idx];
+					if (m.tmpId && msgInfo.tmpId == m.tmpId) {
+						return m;
+					}
+					// 如果id比要查询的消息小，说明没有这条消息
+					if (m.tmpId && m.tmpId < msgInfo.tmpId) {
+						break;
 					}
 				}
 			}