46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<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>
|