u

code/g3soft-libs/docs/examples/rich-text/upload.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// 图片/视频上传：注入 uploadImage / uploadVideo，返回 { fileUrl, ... } 元数据；
+// 上传完成后触发 upload-inline，把内联资源上报给外层（对齐邮件 inline 附件模型）
+import { ref } from 'vue'
+import { G3RichText } from '@g3soft/ui'
+import type { RichTextUploadResult } from '@g3soft/ui'
+
+const html = ref('')
+
+// 演示用假上传：用 FileReader 转 data URL，模拟「上传 → 返回 URL」的完整流程
+function fakeUpload(file: File): Promise<RichTextUploadResult> {
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      resolve({
+        fileUrl: reader.result as string,
+        fileId: `demo-${Date.now()}`,
+        fileName: file.name,
+        fileSize: file.size,
+      })
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+const inlines = ref<RichTextUploadResult[]>([])
+
+function onUploadInline(result: RichTextUploadResult, kind: 'image' | 'video') {
+  inlines.value.push(result)
+}
+</script>
+
+<template>
+  <G3RichText
+    v-model="html"
+    :upload-image="fakeUpload"
+    :upload-video="fakeUpload"
+    placeholder="点击工具条的图片/视频按钮上传…"
+    @upload-inline="onUploadInline"
+  />
+
+  <p v-if="inlines.length" style="font-size: 13px; color: #666; margin-top: 12px">
+    已上传 {{ inlines.length }} 个内联资源：{{ inlines.map((i) => i.fileName).join('、') }}
+  </p>
+</template>