Browse Source

fix(图片元素): 修复图片上传后无法实时更新的问题

确保图片上传后通过slidesStore.updateElement更新元素属性,使Vue能够检测到变化并实时更新视图
lsc 1 month ago
parent
commit
66ab5cdc9b
2 changed files with 21 additions and 4 deletions
  1. 9 3
      src/hooks/useImport.ts
  2. 12 1
      src/views/components/element/ImageElement/index.vue

+ 9 - 3
src/hooks/useImport.ts

@@ -1337,6 +1337,9 @@ export default () => {
                     const file = await makeWhiteTransparent(el.src, `image_${Date.now()}.png`)
                     const url = await uploadFileToS3(file)
                     element.src = url // 替换为远程 URL
+                    
+                    const slidesStore = useSlidesStore()
+                    slidesStore.updateElement({ id: element.id, props: { src: url } })
                   }
                   catch (error) {
                     console.error('Image upload failed:', error)
@@ -1362,13 +1365,16 @@ export default () => {
               }
 
               // 如果 src 是 base64,触发上传
-              if (el.src && typeof el.src === 'string' && el.src.startsWith('data:')) {
+              if (el.picBase64 && typeof el.picBase64 === 'string' && el.picBase64.startsWith('data:')) {
                 const uploadTask = (async () => {
                   try {
-                    const file = makeWhiteTransparent(el.src, `image_${Date.now()}.png`, 'image/png')
+                    const file = makeWhiteTransparent(el.picBase64, `image_${Date.now()}.png`, 'image/png')
                     const url = await uploadFileToS3(file)
                     element.src = url // 替换为远程 URL
-                    el.src = url
+                    
+                    // 使用 slidesStore.updateElement 方法更新元素,确保 Vue 能够检测到变化
+                    const slidesStore = useSlidesStore()
+                    slidesStore.updateElement({ id: element.id, props: { src: url } })
                   }
                   catch (error) {
                     console.error('Image upload failed:', error)

+ 12 - 1
src/views/components/element/ImageElement/index.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import type { ImageElementClip, PPTImageElement } from '@/types/slides'
@@ -153,6 +153,17 @@ const handleClip = (data: ImageClipedEmitData | null) => {
   
   addHistorySnapshot()
 }
+
+// 监听 src 变化,确保图片实时更新
+// watch(() => props.elementInfo.src, (newSrc, oldSrc) => {
+//   if (newSrc !== oldSrc) {
+//     // 当 src 变化时,确保图片能够重新加载
+//     const imgElement = document.querySelector(`img[src="${oldSrc}"]`) as HTMLImageElement
+//     if (imgElement) {
+//       imgElement.src = newSrc
+//     }
+//   }
+// }, { deep: true })
 </script>
 
 <style lang="scss" scoped>