1

src/views/im/chat/index.vue

@@ -141,7 +141,9 @@
         ref="toolsRef"
       >
         <div class="tool-btn">
-          <svg-icon class="tool-icon" name="tp" />
+          <van-uploader :after-read="afterRead">
+            <svg-icon class="tool-icon" name="tp" />
+          </van-uploader>
           <div>图片</div>
         </div>
         <div class="tool-btn">
@@ -174,6 +176,7 @@ import { Keyboard } from "@capacitor/keyboard";
 import { Capacitor } from "@capacitor/core";
 import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
 import  messageAudio from "@/views/im/components/messageAudio/index.vue";
+import { uploadFile } from "@/api/path/im.api";
 
 
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
@@ -375,6 +378,20 @@ 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 message = {
+    content: data,
+    contentType: MSG_TYPE.IMAGE, // 3: 文本消息
+    messageType: MESSAGE_TYPE_USER, // 3: 单聊天
+    to: route.query.uuid,
+  };
+  wsStore.sendMessage(message);
+};
+
 // 时间格式化
 const formatTime = (timestamp) => {
   const date = new Date(timestamp);

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

@@ -191,6 +191,7 @@ onUnmounted(() => {
   cursor: pointer;
   user-select: none;
   max-width: 200px;
+  margin-top: 8px;
 }
 
 .wave {