From 43baedbeed99cb5c6cd15285684ba773098728d2 Mon Sep 17 00:00:00 2001 From: qiutianhong Date: Tue, 5 Nov 2024 18:10:11 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BC=98=E5=8C=96=E5=8D=95?= =?UTF-8?q?=E8=81=8A=E5=92=8C=E7=BE=A4=E8=81=8A=E7=9A=84=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E3=80=81=E6=96=87=E4=BB=B6=E3=80=81=E5=9B=BE=E7=89=87=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E6=8E=A5=E6=94=B6=E5=8F=91=E9=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/chat/ChatMessage.vue | 5 +- frontend/src/stores/chat.ts | 77 ++++++++++++-------- frontend/vite.config.ts | 13 ++-- 3 files changed, 53 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/chat/ChatMessage.vue b/frontend/src/components/chat/ChatMessage.vue index 44e33ce..cc20197 100644 --- a/frontend/src/components/chat/ChatMessage.vue +++ b/frontend/src/components/chat/ChatMessage.vue @@ -55,11 +55,10 @@ v-else-if="item.content_type == 'image'" class="chat-item-image" > - {{ item.message }} @@ -260,8 +259,6 @@ } .chat-item-image { - width: 180px; - height: 180px; margin: 10px; } diff --git a/frontend/src/stores/chat.ts b/frontend/src/stores/chat.ts index 0eaad0d..176b8ce 100644 --- a/frontend/src/stores/chat.ts +++ b/frontend/src/stores/chat.ts @@ -167,6 +167,9 @@ export const useChatStore = defineStore('chatStore', () => { }; const sendMessage = async (messageType: string) => { + + console.log("群聊消息类型", messageType) + if (messageType == 'text') { await sendTextMessage() } @@ -211,7 +214,7 @@ export const useChatStore = defineStore('chatStore', () => { return; } - + Message.message = await getImageSrc(Message.message) // 封装成消息历史记录 const messageHistory = { ...Message, @@ -572,7 +575,7 @@ export const useChatStore = defineStore('chatStore', () => { type: data.type, time: data.time, userId: data.userId, - message: data.message, + message: await getImageSrc(data.message), toUserId: data.toUserId, chatId: data.toUserId, isMe: false, @@ -585,6 +588,14 @@ export const useChatStore = defineStore('chatStore', () => { createdAt: Date.now(), } + if (data.content_type === 'image') { + addMessageHistory.message = await getImageSrc(data.message) + } else if (data.content_type === 'text') { + addMessageHistory.message = data.message + } else if (data.content_type === 'file') { + addMessageHistory.message = data.message + } + await db.addOne("workbenchChatRecord", addMessageHistory) console.log("添加成功") @@ -824,7 +835,6 @@ export const useChatStore = defineStore('chatStore', () => { userId: data.userId, groupId: data.to_groupid, content_type: data.content_type, - message: data.message, time: data.time, type: data.type, chatId: data.to_groupid, @@ -836,6 +846,14 @@ export const useChatStore = defineStore('chatStore', () => { createdAt: Date.now(), }; + if (data.content_type === 'image') { + messageRecord.message = await getImageSrc(data.message) + } else if (data.content_type === 'text') { + messageRecord.message = data.message + } else if (data.content_type === 'file') { + messageRecord.message = data.message + } + // 判断当前消息是否是自己发送的 if (messageRecord.userId === userInfo.value.id) { return; @@ -898,35 +916,30 @@ export const useChatStore = defineStore('chatStore', () => { }; // 获取图片消息预览 - const getImageSrc = async (imageMessage: string = "/C/Users/Desktop/bizhi.png") => { - - // const path = userInfo.value.url + "/chat/image/view?path=" + imageMessage - // console.log(path) - // const response = await fetchGet(path) - - // if (!response.ok) { - // return '' - // } - - // // 检查Content-Type是否为图片 - // const contentType = response.headers.get("Content-Type"); - // if (!contentType || !contentType.startsWith("image/")) { - // console.error("Expected an image content type, but received:", contentType); - // return ''; - // } - - // // 将响应数据转换为 Blob - // const imageBlob = await response.blob(); - - // // 将 Blob 转换为 base64 字符串 - // return new Promise((resolve, reject) => { - // const reader = new FileReader(); - // reader.onloadend = () => { - // resolve(reader.result); // 返回 base64 字符串 - // }; - // reader.onerror = reject; - // reader.readAsDataURL(imageBlob); - // }); + // 获取图片消息预览 + const getImageSrc = async (imageMessage: string) => { + // 确保路径以 '/' 开始 + if (!imageMessage.startsWith('/')) { + imageMessage = '/' + imageMessage; + } + console.log("地址:-----------", imageMessage) + + const path = userInfo.value.url + "/chat/image/view?path=" + imageMessage; + const response = await fetchGet(path); + + if (!response.ok) { + return ''; + } + const blob = await response.blob(); // 获取 Blob 对象 + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onloadend = () => { + const base64data = reader.result; // 转换为 base64 + console.log(base64data); + resolve(base64data); + }; + reader.readAsDataURL(blob); + }); } return { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index b9fdcfd..4c8dc9a 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,9 +1,9 @@ -import { defineConfig } from "vite"; -import path from 'path' import vue from "@vitejs/plugin-vue"; -import AutoImport from 'unplugin-auto-import/vite' -import Components from 'unplugin-vue-components/vite' -import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' +import path from 'path'; +import AutoImport from 'unplugin-auto-import/vite'; +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; +import Components from 'unplugin-vue-components/vite'; +import { defineConfig } from "vite"; export default defineConfig(async () => ({ @@ -24,6 +24,7 @@ export default defineConfig(async () => ({ clearScreen: false, server: { + host: '0.0.0.0', port: 8215 }, resolve: { @@ -32,7 +33,7 @@ export default defineConfig(async () => ({ "~": path.resolve(__dirname, 'wailsjs') }, }, - build:{ + build: { sourcemap: true, // 打包环境移除console.log,debugger terserOptions: {