如何使用jQuery从Summernote的HTML输入中提取所有图片？

一、修复前端图片提取逻辑 #

你当前代码的问题在于：value是纯HTML字符串，不能直接调用$('img')方法。需要先将HTML字符串转换为jQuery对象，再从中提取图片元素。

修正后的jQuery代码 #

$(document).ready(function () {
    $('#qsform').on('submit', function (e) {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();

        var htmlContent = $('#summernote').val();
        // 将HTML字符串转为jQuery对象，再查找所有img标签
        var $images = $(htmlContent).find('img');
        var srcList = [];

        // 遍历所有图片，提取base64格式的图片源（Summernote默认将上传图片转为base64）
        $images.each(function() {
            var imgSrc = $(this).attr('src');
            if (imgSrc && imgSrc.startsWith('data:image/')) {
                srcList.push(imgSrc);
            }
        });

        // 后续通过AJAX将数据提交到后端
        submitFormWithImages(htmlContent, srcList);
    });
});

// 封装AJAX提交逻辑
function submitFormWithImages(htmlContent, srcList) {
    $.ajax({
        url: '/User/AskQuestion',
        method: 'POST',
        data: {
            Title: $('#title1').val(),
            Description: htmlContent,
            Subject: $('#subject').val(),
            ImageSrcs: srcList
        },
        success: function() {
            window.location.href = '/User/QuestionSuccess'; // 提交成功后跳转
        },
        error: function(xhr) {
            console.error('提交失败:', xhr.responseText);
        }
    });
}

二、后端（ASP.NET Core）图片存储实现 #

前端传递的是base64格式的图片数据，需要在后端解码并保存到文件系统，同时更新HTML中的图片路径为服务器可访问的地址。

控制器处理代码 #

using Microsoft.AspNetCore.Mvc;
using System.IO;
using System;

[HttpPost]
public IActionResult AskQuestion(Question model, List<string> ImageSrcs)
{
    if (!ModelState.IsValid)
    {
        return Json(new { success = false, errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage)) });
    }

    var uploadDir = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
    // 确保上传目录存在
    Directory.CreateDirectory(uploadDir);

    foreach (var imgSrc in ImageSrcs)
    {
        // 解析base64数据部分
        var base64Data = imgSrc.Split(',')[1];
        var imageBytes = Convert.FromBase64String(base64Data);
        
        // 生成唯一文件名，避免重复
        var fileName = $"{Guid.NewGuid()}.png";
        var filePath = Path.Combine(uploadDir, fileName);
        
        // 保存图片到文件
        System.IO.File.WriteAllBytes(filePath, imageBytes);
        
        // 将HTML中的base64路径替换为服务器路径
        model.Description = model.Description.Replace(imgSrc, $"/uploads/{fileName}");
    }

    // 将Question对象保存到数据库
    _context.Questions.Add(model);
    _context.SaveChanges();

    return Json(new { success = true });
}

三、关键注意事项 #

• 确保wwwroot/uploads目录有写入权限，或者通过代码自动创建
• 可根据图片的MIME类型（如data:image/jpeg）动态设置文件扩展名
• 建议添加图片大小、格式校验，防止恶意文件上传
• 生产环境中可考虑使用云存储（如OSS）替代本地文件存储

内容的提问来源于stack exchange，提问作者Usman Arshad