perf: 优化性能减少一次 JS 调度开销

Author: ArgoZhang

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

@@ -64,7 +64,7 @@ public partial class Editor
     /// 获得/设置 Editor 组件内上传文件时回调此方法
     /// </summary>
     [Parameter]
-    public Func<EditorUploadFile, Task<string>>? OnFileUpload { get; set; }
+    public Func<EditorUploadFile, Task>? OnFileUpload { get; set; }
 
     private bool _lastShowSubmit = true;
 
@@ -265,30 +265,19 @@ public async Task<string> ClickPluginItem(string pluginItemName)
     /// <summary>
     /// 文件上传回调
     /// </summary>
-    /// <param name="uploadFile"></param>
+    /// <param name="name"></param>
+    /// <param name="contentType"></param>
+    /// <param name="size"></param>
+    /// <param name="stream"></param>
     [JSInvokable]
-    public async Task<string> ImageUpload(EditorUploadFile uploadFile)
+    public async Task ImageUpload(string name, string contentType, long size, IJSStreamReference stream)
     {
-#if NET6_0_OR_GREATER
-        var ret = "";
-        if (Module != null)
+        var data = await stream.OpenReadStreamAsync(size);
+        var file = new EditorUploadFile(name, contentType, size, data);
+        if (OnFileUpload != 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);
-                }
-            }
+            await OnFileUpload(file);
         }
-        return ret;
-#else
-        await Task.Yield();
-        throw new NotSupportedException();
-#endif
     }
 
     /// <summary>

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

@@ -47,21 +47,21 @@ export async function init(id, invoker, methodGetPluginAttrs, methodClickPluginI
             option.toolbar = toolbar;
             reloadCallbacks(id, option);
             if (hasUpload) {
-                option.callbacks.onImageUpload = function (files) {
+                option.callbacks.onImageUpload = async 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)
-                            }
-                        })
+                        const image = createImage(file);
+                        editor.$editor.summernote('insertNode', image);
+
+                        const buffer = await file.arrayBuffer();
+                        const stream = DotNet.createJSStreamReference(buffer);
+                        await editor.invoker.invokeMethodAsync('ImageUpload',
+                            file.name,
+                            file.type || 'application/octet-stream',
+                            file.size,
+                            stream
+                        )
                     }
                 }
             }
@@ -166,11 +166,6 @@ 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)