Editor增加Upload回调

Author: j4587698

src/components/BootstrapBlazor.SummerNote/Components/Editor/Editor.razor.cs

@@ -60,6 +60,12 @@ public partial class Editor
     [Parameter]
     public bool ShowSubmit { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 Editor组件内上传文件时回调此方法
+    /// </summary>
+    [Parameter]
+    public Func<EditorUploadFile, Task<string>>? OnFileUpload { get; set; }
+
     private bool _lastShowSubmit = true;
 
     private string? ShowSubmitString => ShowSubmit ? "true" : null;
@@ -83,7 +89,7 @@ public partial class Editor
     public string? Language { get; set; }
 
     /// <summary>
-    /// 获得/设置 语言扩展脚本路径 默认 null 如加载德语可设置为 
+    /// 获得/设置 语言扩展脚本路径 默认 null 如加载德语可设置为
     /// </summary>
     [Parameter]
     public string? LanguageUrl { get; set; }
@@ -186,7 +192,7 @@ protected override async Task InvokeInitAsync()
             methodClickPluginItem = nameof(ClickPluginItem);
         }
 
-        await InvokeVoidAsync("init", Id, Interop, methodGetPluginAttributes, methodClickPluginItem, Height, Value ?? "", Language, LanguageUrl);
+        await InvokeVoidAsync("init", Id, Interop, methodGetPluginAttributes, methodClickPluginItem, Height, Value ?? "", Language, LanguageUrl, OnFileUpload is not null);
     }
 
     /// <summary>
@@ -256,6 +262,35 @@ public async Task<string> ClickPluginItem(string pluginItemName)
         return ret;
     }
 
+    /// <summary>
+    /// 文件上传回调
+    /// </summary>
+    /// <param name="uploadFile"></param>
+    [JSInvokable]
+    public async Task<string> ImageUpload(EditorUploadFile uploadFile)
+    {
+#if NET6_0_OR_GREATER
+        var ret = "";
+        if (Module != null)
+        {
+            var stream = await InvokeAsync<IJSStreamReference>("fetch", Id, uploadFile.Index);
+            if (stream != null)
+            {
+                using var data = await stream.OpenReadStreamAsync();
+                uploadFile.UploadStream = data;
+                if (OnFileUpload != null)
+                {
+                    ret = await OnFileUpload(uploadFile);
+                }
+            }
+        }
+        return ret;
+#else
+        await Task.Yield();
+        throw new NotSupportedException();
+#endif
+    }
+
     /// <summary>
     /// 执行 editor 的方法
     /// </summary>

src/components/BootstrapBlazor.SummerNote/Components/Editor/Editor.razor.js

@@ -7,7 +7,7 @@ if (window.BootstrapBlazor === void 0) {
     window.BootstrapBlazor = {};
 }
 
-export async function init(id, invoker, methodGetPluginAttrs, methodClickPluginItem, height, value, lang, langUrl) {
+export async function init(id, invoker, methodGetPluginAttrs, methodClickPluginItem, height, value, lang, langUrl, hasUpload) {
     const el = document.getElementById(id)
     if (el === null) {
         return
@@ -46,6 +46,26 @@ export async function init(id, invoker, methodGetPluginAttrs, methodClickPluginI
             const showSubmit = el.getAttribute("data-bb-submit") === "true"
             option.toolbar = toolbar;
             reloadCallbacks(id, option);
+            if (hasUpload) {
+                option.callbacks.onImageUpload = function (files) {
+                    editor.files = files
+                    for (let i = 0; i < files.length; i++) {
+                        const file = files[i];
+                        editor.invoker.invokeMethodAsync('ImageUpload', {
+                            fileName: file.name,
+                            fileSize: file.size,
+                            contentType: file.type,
+                            lastModified: new Date(file.lastModified).toISOString(),
+                            index: i
+                        }).then(data => {
+                            if (data !== "") {
+                                editor.$editor.summernote('insertImage', data, file.name)
+                            }
+                        })
+                    }
+                }
+            }
+
             if (!showSubmit) {
                 const externalOnChange = option.callbacks.onChange;
                 option.callbacks.onChange = function (contents) {
@@ -146,6 +166,11 @@ export function update(id, val) {
     }
 }
 
+export function fetch(id, index) {
+    const md = Data.get(id)
+    return md.files[index]
+}
+
 export function invoke(id, method, parameter) {
     const editor = Data.get(id)
     editor.$editor.summernote(method, ...parameter)

src/components/BootstrapBlazor.SummerNote/Components/Editor/EditorUploadFile.cs

@@ -0,0 +1,115 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 文件信息
+/// </summary>
+public class EditorUploadFile
+{
+    /// <summary>
+    /// 文件名
+    /// </summary>
+    public string? FileName { get; set; }
+
+    /// <summary>
+    /// 文件大小
+    /// </summary>
+    public long FileSize { get; set; }
+
+    /// <summary>
+    /// 最后修改日期
+    /// </summary>
+    public string? LastModified { get; set; }
+
+    /// <summary>
+    /// 文件类型
+    /// </summary>
+    public string? ContentType { get; set; }
+
+    /// <summary>
+    /// 上传的文件流
+    /// </summary>
+    public Stream? UploadStream { get; set; }
+
+    /// <summary>
+    /// 文件索引
+    /// <para>用于标识文件在上传列表中的位置</para>
+    /// <para>例如在上传多个文件时可以通过此属性区分每个文件的索引位置</para>
+    /// </summary>
+    public int Index { get; set; }
+
+    /// <summary>
+    /// 返回码，0为成功，非0失败
+    /// </summary>
+    public int Code { get; set; }
+
+    /// <summary>
+    /// 错误信息
+    /// </summary>
+    public string? Error { get; set; }
+
+    /// <summary>
+    /// 保存到文件
+    /// </summary>
+    /// <param name="fileName"></param>
+    /// <param name="token"></param>
+    /// <returns></returns>
+    public async Task<bool> SaveToFile(string fileName, CancellationToken token = default)
+    {
+        var ret = false;
+        if (UploadStream != null)
+        {
+            // 文件保护，如果文件存在则先删除
+            if (System.IO.File.Exists(fileName))
+            {
+                try
+                {
+                    System.IO.File.Delete(fileName);
+                }
+                catch (Exception ex)
+                {
+                    Code = 1002;
+                    Error = ex.Message;
+                }
+            }
+
+            var folder = Path.GetDirectoryName(fileName);
+            if (!string.IsNullOrEmpty(folder) && !Directory.Exists(folder))
+            {
+                Directory.CreateDirectory(folder);
+            }
+
+            if (Code == 0)
+            {
+                using var uploadFile = File.OpenWrite(fileName);
+
+                try
+                {
+                    // 打开文件流
+                    var stream = UploadStream;
+
+                    var buffer = new byte[4 * 1096];
+                    int bytesRead = 0;
+
+                    // 开始读取文件
+                    while ((bytesRead = await stream.ReadAsync(buffer, token)) > 0)
+                    {
+                        await uploadFile.WriteAsync(buffer.AsMemory(0, bytesRead), token);
+
+                    }
+                    ret = true;
+                }
+                catch (Exception ex)
+                {
+                    Code = 1003;
+                    Error = ex.Message;
+                }
+            }
+        }
+        return ret;
+    }
+
+}