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

Posted 2023-03-22

【中文标题】SummerNote onImageUpload 将服务器请求转换为 C# BASE64？

【英文标题】：SummerNote onImageUpload converting server request to C# BASE64?

【发布时间】：2017-01-12 03:50:57

【问题描述】：

我有一个 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) 中？感谢您的时间和帮助！

【参考方案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);
            
        );