diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 7dbaf1d6837..7fd270bc091 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -70,7 +70,7 @@ - + diff --git a/src/BootstrapBlazor.Server/Components/Routes.razor b/src/BootstrapBlazor.Server/Components/Routes.razor index f90a06ec137..bb2e405ae65 100644 --- a/src/BootstrapBlazor.Server/Components/Routes.razor +++ b/src/BootstrapBlazor.Server/Components/Routes.razor @@ -1,5 +1,6 @@  + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Editors.razor b/src/BootstrapBlazor.Server/Components/Samples/Editors.razor index b296e9a3330..9158f8c4dd0 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Editors.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Editors.razor @@ -1,7 +1,9 @@ @page "/editor" + @inject SwalService SwalService @inject PackageVersionService VersionManager @inject IStringLocalizer Localizer +@inject IOptionsMonitor WebsiteOption

@Localizer["EditorsTitle"]

@@ -38,7 +40,7 @@ - + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Editors.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Editors.razor.cs index cd97b1d1478..2c340824e87 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Editors.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Editors.razor.cs @@ -111,6 +111,17 @@ private async Task InsertHtmlAsync() await Editor.DoMethodAsync("pasteHTML", $"

{Localizer["DoMethodAsyncPasteHTML"]}

"); } + private async Task OnFileUpload(EditorUploadFile uploadFile) + { + var url = Path.Combine("images", "uploader", $"{Path.GetFileNameWithoutExtension(uploadFile.FileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(uploadFile.FileName)}"); + var fileName = Path.Combine(WebsiteOption.CurrentValue.WebRootPath, url); + await uploadFile.SaveToFileAsync(fileName); + + // 此处返回空字符串底层使用 URL.createObjectURL 方法创建 Blob 对象地址 + // 实战中可以返回 SSO 地址或者 base64 字符串等 + return ""; + } + private string? _editorCode; private async Task OnGetCode() @@ -167,6 +178,14 @@ private AttributeItem[] GetAttributes() => Type = "IEnumerable", ValueList = " — ", DefaultValue = " — " + }, + new() + { + Name = "OnFileUpload", + Description = Localizer["OnFileUploadAttribute"], + Type = "Func", + ValueList = " — ", + DefaultValue = " — " } ]; } diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 4418aa61f7c..48d51245154 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2536,7 +2536,7 @@ "EditorPlaceholderIntro": "The prompt message when a null value is set by setting the Placeholder attribute", "EditorPlaceholderDescription": "The default prompt is Edit after clicking", "EditorIsEditorTitle": "Display as a rich text edit box by default", - "EditorIsEditorIntro": "Set the component to be directly displayed as a rich text edit box by setting the IsEditor property", + "EditorIsEditorIntro": "Set the component to be directly displayed as a rich text edit box by setting the IsEditor property. When uploading an image, you can get the image information through the OnFileUpload callback method", "EditorHeightTitle": "Custom height", "EditorHeightIntro": "Set the height of the component by setting the Height property", "EditorOnValueChangedTitle": "Two-way binding", @@ -2577,7 +2577,8 @@ "DoMethodAsyncButton2": "Update to H2", "DoMethodAsyncButton3": "Insert Image", "DoMethodAsyncButton4": "Get Code", - "DoMethodAsyncPasteHTML": "Here is the content inserted by the external button" + "DoMethodAsyncPasteHTML": "Here is the content inserted by the external button", + "OnFileUploadAttribute": "File upload callback method" }, "BootstrapBlazor.Server.Components.Samples.EditorForms": { "Title": "EditorForm", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 957f52b3852..d205b8a106e 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2537,7 +2537,7 @@ "EditorPlaceholderIntro": "通过设置 Placeholder 属性来设置空值时的提示消息", "EditorPlaceholderDescription": "默认提示是 点击后进行编辑", "EditorIsEditorTitle": "默认显示为富文本编辑框", - "EditorIsEditorIntro": "通过设置 IsEditor 属性来设置组件直接显示为富文本编辑框", + "EditorIsEditorIntro": "通过设置 IsEditor 属性来设置组件直接显示为富文本编辑框，上传图片时可以通过 OnFileUpload 回调方法获得图片信息", "EditorHeightTitle": "自定义高度", "EditorHeightIntro": "通过设置 Height 属性来设置组件高度", "EditorOnValueChangedTitle": "双向绑定", @@ -2578,7 +2578,8 @@ "DoMethodAsyncButton2": "将段落修改为 H2", "DoMethodAsyncButton3": "添加一张图片", "DoMethodAsyncButton4": "获得组件内容", - "DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容" + "DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容", + "OnFileUploadAttribute": "文件上传回调方法" }, "BootstrapBlazor.Server.Components.Samples.EditorForms": { "Title": "EditorForm 表单组件", diff --git a/src/BootstrapBlazor/wwwroot/modules/upload.js b/src/BootstrapBlazor/wwwroot/modules/upload.js index a8e445fb1d0..b1c611fe18f 100644 --- a/src/BootstrapBlazor/wwwroot/modules/upload.js +++ b/src/BootstrapBlazor/wwwroot/modules/upload.js @@ -1,6 +1,5 @@ import Data from "./data.js" import EventHandler from "./event-handler.js" -import { readFileAsync } from "./utility.js" export function init(id) { const el = document.getElementById(id) @@ -98,10 +97,7 @@ export async function getPreviewUrl(id, fileName) { if (files) { const file = [...files].find(v => v.name === fileName); if (file) { - const data = await readFileAsync(file); - if (data) { - url = URL.createObjectURL(data); - } + url = URL.createObjectURL(file); } } return url;