URL.createObjectURL需要释放

src/stores/audio.js

@@ -42,9 +42,20 @@ export const useAudioStore = defineStore('anylink-audio', () => {
     }
   }
 
+  const clear = () => {
+    Object.values(audio.value).forEach((item) => {
+      if (item.url.startsWith('blob:')) {
+        URL.revokeObjectURL(item.url)
+      }
+    })
+
+    audio.value = {}
+  }
+
   return {
     audio,
     setAudio,
-    preloadAudio
+    preloadAudio,
+    clear
   }
 })

src/stores/document.js

@@ -39,9 +39,20 @@ export const useDocumentStore = defineStore('anylink-document', () => {
     }
   }
 
+  const clear = () => {
+    Object.values(document.value).forEach((item) => {
+      if (item.url.startsWith('blob:')) {
+        URL.revokeObjectURL(item.url)
+      }
+    })
+
+    document.value = {}
+  }
+
   return {
     document,
     setDocument,
-    preloadDocument
+    preloadDocument,
+    clear
   }
 })

src/stores/image.js

@@ -92,6 +92,20 @@ export const useImageStore = defineStore('anylink-image', () => {
     }
   }
 
+  const clear = () => {
+    Object.values(image.value).forEach((item) => {
+      if (item.originUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(item.originUrl)
+      }
+
+      if (item.thumbUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(item.thumbUrl)
+      }
+    })
+
+    image.value = {}
+  }
+
   return {
     image,
     imageInSession,
@@ -99,6 +113,7 @@ export const useImageStore = defineStore('anylink-image', () => {
     setImageInSession,
     clearImageInSession,
     loadImageInfoFromContent,
-    preloadImage
+    preloadImage,
+    clear
   }
 })

src/stores/video.js

@@ -39,9 +39,20 @@ export const useVideoStore = defineStore('anylink-video', () => {
     }
   }
 
+  const clear = () => {
+    Object.values(video.value).forEach((item) => {
+      if (item.url.startsWith('blob:')) {
+        URL.revokeObjectURL(item.url)
+      }
+    })
+
+    video.value = {}
+  }
+
   return {
     video,
     setVideo,
-    preloadVideo
+    preloadVideo,
+    clear
   }
 })

src/views/layout/LayoutContainer.vue

@@ -8,7 +8,16 @@ import {
 } from '@element-plus/icons-vue'
 import { onMounted, onUnmounted, ref, computed } from 'vue'
 import ContactUs from '@/views/layout/components/ContactUs.vue'
-import { useUserStore, useMessageStore, useSearchStore, useGroupStore } from '@/stores'
+import {
+  useUserStore,
+  useMessageStore,
+  useSearchStore,
+  useGroupStore,
+  useImageStore,
+  useAudioStore,
+  useVideoStore,
+  useDocumentStore
+} from '@/stores'
 import router from '@/router'
 import MyCard from '@/views/layout/components/MyCard.vue'
 import NaviMenu from '@/views/layout/components/NaviMenu.vue'
@@ -34,6 +43,10 @@ const userData = useUserStore()
 const messageData = useMessageStore()
 const searchData = useSearchStore()
 const groupData = useGroupStore()
+const imageData = useImageStore()
+const audioData = useAudioStore()
+const videoData = useVideoStore()
+const documentData = useDocumentStore()
 const isShowMyCard = ref(false)
 const contactUsRef = ref(null)
 const sourceCodeRef = ref(null)
@@ -87,6 +100,10 @@ onUnmounted(() => {
   userData.clear()
   messageData.clear()
   searchData.clear()
+  imageData.clear()
+  audioData.clear()
+  videoData.clear()
+  documentData.clear()
   wsConnect.closeWs()
 })
 

src/views/message/components/ImageMsgBox.vue

@@ -50,11 +50,11 @@ const initialIndex = computed(() => {
 })
 
 const fileName = computed(() => {
-  return props.isForMix ? '' : imageData.image[props.imgId].fileName
+  return props.isForMix ? '' : imageData.image[props.imgId]?.fileName
 })
 
 const size = computed(() => {
-  return props.isForMix ? '' : imageData.image[props.imgId].size
+  return props.isForMix ? '' : imageData.image[props.imgId]?.size
 })
 
 const formatSize = computed(() => {