添加图片类型限制

src/stores/modules/webSocketStore.js

@@ -59,7 +59,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         friendUsername: params.friendUsername,
       });
       this.messages =
-        data.map((item) => {
+        data?.map((item) => {
           item.avatar = item.avatar ? IM_PATH + item.avatar : item.avatar;
           return item;
         }) || [];

src/views/im/chat/index.vue

@@ -42,7 +42,7 @@
               </div>
 
               <!-- 图片消息 -->
-              <div class="content" v-else-if="item.contentType === MSG_TYPE.IMAGE">
+              <div class="img-message" v-else-if="item.contentType === MSG_TYPE.IMAGE">
                 <van-image
                   :src="item?.localUrl ||  IM_PATH + item.url"
                   alt="图片"
@@ -140,7 +140,7 @@
         ref="toolsRef"
       >
         <div class="tool-btn">
-          <van-uploader :after-read="afterRead">
+          <van-uploader :after-read="afterRead" :before-read="beforeRead">
             <svg-icon class="tool-icon" name="tp" />
           </van-uploader>
           <div>图片</div>
@@ -175,8 +175,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";
-
+import { showToast } from 'vant';
 
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 // 路由 & store
@@ -379,6 +378,18 @@ const afterRead = async (file) => {
  
   wsStore.sendMessage(message);
 };
+// 图片类型
+const beforeRead = (file) => {
+  const realFile = file.file || file;
+  const type = realFile.type;
+  const name = realFile.name || '';
+
+  if (type === 'image/svg+xml' || name.endsWith('.svg')) {
+    showToast('不支持上传 SVG 格式的图片');
+    return false;
+  }
+  return true;
+};
 
 // 时间格式化
 const formatTime = (timestamp) => {
@@ -563,6 +574,9 @@ const goDetail = () => router.push("detail");
             font-weight: 400;
             font-size: 15px;
           }
+          .img-message{
+            margin-top: 8px;
+          }
         }
       }
       .withdrawal {