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

Question

我有一个 C# MVC 项目，我需要使用 Summernote v0.8.2 作为我的所见即所得编辑器，以及使用 jsPDF 导出 PDF。我知道有一些例子可以做到这一点。我的问题是我需要自定义调整大小/处理使用 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。所以，我的问题在这里：

• 如何从请求流中获取文件（图像）？
• 如何将这个“东西”从上面转换成 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);
            }
        });
    }