图片上传到 Summernote 编辑器中的文件夹

Posted 2023-03-21

【中文标题】图片上传到 Summernote 编辑器中的文件夹

【英文标题】：Images upload to folder in Summernote editor

【发布时间】：2016-02-18 15:43:15

【问题描述】：

我有 asp.net mvc 4 应用程序。在那个应用程序中我有表单，在那个表单中我有summernote富文本编辑器。但是在这个编辑器中，我可以选择将图像上传到这个编辑器。

但是，一旦我填写了其余字段并提交了此表格。它没有保存我通过summernote编辑器上传的图像。

我想将图片上传到以下路径~/Content/Images/

并在数据库字段中保持路径为~/Content/Images/Image_Name.JPG

所以我尝试通过关注this solution 和 GitHub Issue reported here 来创建我的解决方案

来自浏览页面

<div class="form-group">
 @html.TextAreaFor(m => m.Field_Value, new  @class = "form-control summernote")
</div>

控制器方法

    [HttpPost]
    public byte[] UploadImage(HttpPostedFileBase file)
    
        Stream fileStream = file.InputStream;
        var mStreamer = new MemoryStream();
        mStreamer.SetLength(fileStream.Length);
        fileStream.Read(mStreamer.GetBuffer(), 0, (int)fileStream.Length);
        mStreamer.Seek(0, SeekOrigin.Begin);
        byte[] fileBytes = mStreamer.GetBuffer();
        Stream stream = new MemoryStream(fileBytes);

        //string result = System.Text.Encoding.UTF8.GetString(fileBytes);
        var img = Bitmap.FromStream(stream);
        Directory.CreateDirectory("~//Content//Images//" + img);
        return fileBytes;

    

这是脚本

<script type="text/javascript">
$('.summernote').summernote(
    height: 200,   // set editable area's height
    focus: true,   // set focus editable area after Initialize summernote
    onImageUpload: function (files, editor, welEditable) 
        var formData = new FormData();
        formData.append("file", files[0]);

        $.ajax(
            url: "@Url.Action("Home", "UploadImage")",
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            success: function (imageUrl) 
                if (!imageUrl) 
                    debugger;
                    // handle error
                    return;
                
                editor.insertImage($editable, imageUrl);
            ,
            error: function () 
                // handle error
            
        ); 
    
);

这也是一次，它根本不显示图像是否上传到编辑器

【参考方案1】：

我更新了你的脚本，它对我有用（检查代码 cmets 上的更改）：

<script type="text/javascript">
var editor =  // 1st change: will need this variable later
$('.summernote').summernote(
    height: 200,   
    focus: true,   
    callbacks:  // 2nd change - onImageUpload inside of "callbacks"
      onImageUpload: function (files)  // 3rd change - dont need other params
        var formData = new FormData();
        formData.append("file", files[0]);

        $.ajax(
            url: "@Url.Action("Home", "UploadImage")",
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            success: function (imageUrl) 
                if (!imageUrl) 
                    // handle error
                    return;
                
                // 4th change - create img element and add to document
                var imgNode = document.createElement('img');
                imgNode.src = imageUrl;
                editor.summernote('insertNode', imgNode);
            ,
            error: function () 
                // handle error
            
        );
       
    
);
</script>