1

src/views/im/chat/index.vue

@@ -305,7 +305,6 @@ const stopRecording = async () => {
       resolve(new Uint8Array());
       return;
     }
-
     // 停止录音
     mediaRecorder.value.stop();
     mediaRecorder.value.stream.getTracks().forEach((track) => track.stop());
@@ -323,6 +322,8 @@ const stopRecording = async () => {
   });
 };
 
+
+// 发送音频消息
 const sendAudioMessage = async (event) => {
   if (isTouchDevice.value && event.type === "mouseup") {
     return;
@@ -353,6 +354,20 @@ 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) => {

src/views/im/components/messageAudio/index.vue

@@ -7,7 +7,7 @@
         :key="i"
         class="bar"
         :style="{
-          height: isPlaying ? `${randomHeights[i-1]}px` : `4px`
+          height: isPlaying ? `${randomHeights[i-1]}px` : `3px`
         }"
       ></span>
     </div>

src/views/im/hook/messagesHook.js

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