SummerNote onImageUpload 将服务器请求转换为 C# BASE64？

Question

我有一个 C# MVC 项目，我需要使用 Summernote v0.8.2 作为我的 WYSIWYG 编辑器，同时使用 jsPDF 导出 PDF。我知道有一些例子可以使这项工作奏效。我的问题是我需要自定义 resize/process 使用 summernote 插入的图像。同样，我知道您可以使用 onImageUpload 回调捕获此事件。我无法正确处理服务器上的传入请求以获取图像并将其转换为 BASE64 字符串。我认为这应该很容易，但我不知道如何处理传入的提取图像的请求。我已经为您提供了整个过程，只是为了确保您有足够的信息来提供帮助。

这是我的 Summernote 设置：

$('.summernote').summernote(
            {                                  
                toolbar: [
                     ['style', ['bold', 'italic', 'underline', 'clear']]
                    , ['fontname', ['fontname']]
                    , ['fontsize', ['fontsize']]
                    , ['color', ['color']]
                    , ['insert', ['picture']]
                ]                   
                , callbacks: {
                    onImageUpload: function (image) {                            
                        uploadImage(image[0]);
                    }
                }
            }
            );

这是 AJAX 调用：仅供参考 - 我确实更改了从图像附加到文件的数据。没有改变结果。

function uploadImage(file, editor, welEditb) {
        var data = new FormData();                        
        //data.append("image", image);
        data.append("file", file);

        $.ajax({
            url: '/home/UploadSummerNoteFile',
            cache: false,
            contentType: false,
            processData: false,                
            data: data,
            type: "post",
            success: function (data) {
                alert('display base64 data: ' + data);
                //editor.insertImage(welEditable, url);
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

我的服务器方法没有任何参数，我不确定如何只提取文件（图像？）内容。获得实际文件后，我需要对其进行修改和更改（大小、分辨率等，我可以做到），然后将其转换为 BASE64 并将其发送回 UI。所以，我的问题是：

如何从请求流中获取文件（图像）？
如何将上面的 'thing' 转换为 BASE64？

我对我一直在测试的图像使用了在线 BASE64 转换器，所以我知道我的尝试没有创建有效的字符串。

这是我在网上找到的部分示例，我对其进行了（很差的）修改以尝试使其工作，但它没有：

        byte[] buffer = new byte[Request.InputStream.Length];
        Request.InputStream.Read(buffer, 0, buffer.Length);

        string data = Encoding.Default.GetString(buffer);


        string[] tokens = data.Split(',');
        if (tokens.Length > 1)
        {
            // not sure what I'm doing, trying stuff.  BOOOOM!
            image = Convert.FromBase64String(tokens[1]);
            base64 = Convert.ToBase64String(image);

            //string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + ".png";
            //string path = Path.Combine(@"D:\www\images", fileName);
            //File.WriteAllBytes(path, image);
        }

我需要对缓冲区或数据对象做什么？文件的内容在请求中的什么位置？它在序列化以传输到服务器时是否已经转换？另外，假设其他一切都已完成，我是否需要将文件保存到服务器以便将其放置在 Summernote 的 editor.insertImage(welEditable, url) 中？感谢您的宝贵时间和帮助！

Answer 1

看来我做的比需要的难多了。这只是一个常规请求，所以从请求中提取文件，并将其复制到内存流中。在这种情况下，我将 BASE64 字符串发送回调用函数。希望这对其他人有帮助。

    [HttpPost]
    public JsonResult UploadFile()
    {
        var fileName = Request.Files[0].FileName;
        var base64 = string.Empty;

        using (var memoryStream = new MemoryStream())
        {
            Request.Files[0].InputStream.CopyTo(memoryStream);
            var fileContent = memoryStream.ToArray();
            base64 = Convert.ToBase64String(fileContent);            
        }

        return Json(base64);
    }

这是 uploadImage ajax 方法的更改：我创建了一个 IMG 实例，并将 src 更改为 BASE64 值。

function uploadImage(file, editor, welEditb) {
        var data = new FormData();                             
        data.append("file", file);

        $.ajax({
            url: '/home/UploadSummerNoteFile',
            cache: false,
            contentType: false,
            processData: false,                
            data: data,
            type: "post",
            success: function (data) {                    
                var image = $('<img>').attr('src', 'data:' + file.type + ';base64,' + data);
                $('.summernote').summernote("insertNode", image[0]);                    
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

SummerNote onImageUpload 将服务器请求转换为 C# BASE64？

SummerNote onImageUpload converting server request to C# BASE64?

ajax

base64

image

summernote