1

src/views/im/chat/index.vue

@@ -42,9 +42,9 @@
               </div>
 
               <!-- 图片消息 -->
-              <div class="content" v-else-if="item.contentType === 2">
-                <img
-                  :src="item.content"
+              <div class="content" v-else-if="item.contentType === MSG_TYPE.IMAGE">
+                <van-image
+                  :src="item?.localUrl ||  IM_PATH + item.url"
                   alt="图片"
                   style="max-width: 120px; border-radius: 8px"
                 />
@@ -76,8 +76,7 @@
                   controls
                   style="width: 200px"
                 /> -->
-                <messageAudio  v-if="item.localUrl" :src="item.localUrl" :isSender="isSender(item.toUsername)"/>
-                <messageAudio  v-else :src="IM_PATH + item.url" :isSender="isSender(item.toUsername)"/>
+                <messageAudio :src="item?.localUrl ||  IM_PATH + item.url" :isSender="isSender(item.toUsername)"/> 
               </div>
 
               <!-- 其他未知类型 -->
@@ -354,20 +353,7 @@ const sendAudioMessage = async (event) => {
   }
 };
 
-// 发送图片&文件
-const sendFileMessage = async (file) => { 
-  // 文件转换成Uint8Array
-  const fileData = await fileToUint8Array(file);
-  const message = {
-    content: text.value, // 如果有文本内容
-    contentType: MSG_TYPE.IMAGE, // 音频消息类型
-    messageType: MESSAGE_TYPE_USER, // 单聊消息
-    to: route.query.uuid, // 接收方ID
-    fileSuffix: file.type, // 使用webm后缀更准确
-    file: fileData, // 将Uint8Array转为普通数组
-  };
-};
-
+ 
 const audio = ref(null);
 
 const playAudio = (url) => {
@@ -393,17 +379,18 @@ const sendMessage = () => {
   scrollToBottom();
 };
 
-const afterRead = async (file) => {
-  const formData = new FormData();
-  formData.append("uuid", walletStore.account);
-  formData.append("file", file.file);
-  const { code, data } = await uploadFile(formData);
+// 发送图片消息
+const afterRead = async (file) => { 
+  const arrayBuffer = await file.file.arrayBuffer(); 
   const message = {
-    content: data,
-    contentType: MSG_TYPE.IMAGE, // 3: 文本消息
-    messageType: MESSAGE_TYPE_USER, // 3: 单聊天
-    to: route.query.uuid,
+    content: text.value, // 如果有文本内容
+    contentType: MSG_TYPE.IMAGE, // 音频消息类型
+    messageType: MESSAGE_TYPE_USER, // 单聊消息
+    to: route.query.uuid, // 接收方ID
+    fileSuffix: file.type, // 使用webm后缀更准确
+    file: new Uint8Array(arrayBuffer), // 将Uint8Array转为普通数组
   };
+ 
   wsStore.sendMessage(message);
 };
 

src/views/im/hook/messagesHook.js

@@ -56,4 +56,15 @@ export const handleMessageHook = (message, state) => {
       toUsername: message.to,
     });
   }
+
+  // 图片
+  if (message.contentType === MSG_TYPE.IMAGE) { 
+    const blob = new Blob([message.file], { type: message.fileSuffix });
+    const url = URL.createObjectURL(blob);
+    state.messages.push({
+      ...message,
+      file: url,
+      toUsername: message.to,
+    });
+  }
 };