Summernote的onImageUpload失效，如何自定义图片上传路径？

我来帮你一步步搞定这两个问题——先把onImageUpload回调配置正确，再配合后端代码实现自定义文件夹的图片存储。

第一步：修复前端onImageUpload回调配置 #

你当前的代码里缺少onImageUpload的回调逻辑，所以Summernote不会触发图片上传的处理逻辑。修改你的Summernote初始化代码，补上这个关键回调：

$('#summernote').summernote({
  tabsize: 2,
  height: 200,
  focus: true,
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    },
    // 新增图片上传回调
    onImageUpload: function(files) {
      // 调用自定义上传函数，这里先处理单张图片，多图的话可以循环files数组
      uploadSummernoteImage(files[0]);
    }
  }
});

// 自定义图片上传函数，用FormData格式发送到后端
function uploadSummernoteImage(file) {
  const formData = new FormData();
  formData.append('summernote_image', file); // 后端接收的字段名，可自定义

  $.ajax({
    url: 'image_upload_handler.php', // 替换成你的后端处理文件路径
    method: 'POST',
    data: formData,
    contentType: false, // 必须设为false，让jQuery自动处理正确的Content-Type
    processData: false, // 必须设为false，避免jQuery把FormData转成字符串
    success: function(response) {
      // 后端返回图片URL后，插入到Summernote编辑器中
      $('#summernote').summernote('insertImage', response.image_url);
    },
    error: function(xhr) {
      console.error('图片上传失败:', xhr.responseText);
      alert('图片上传出错，请检查后端配置后重试');
    }
  });
}

第二步：后端实现自定义文件夹存储 #

接下来需要写一个后端处理文件（比如PHP的image_upload_handler.php），负责接收上传的图片，保存到你指定的文件夹，并返回可访问的图片URL。

后端示例（PHP） #

<?php
// 1. 定义你的目标上传文件夹路径（根据服务器实际结构调整）
$target_dir = './your_custom_uploads/';

// 2. 检查文件夹是否存在，不存在则自动创建（确保服务器有创建权限）
if (!file_exists($target_dir)) {
    mkdir($target_dir, 0755, true); // 0755是权限设置，生产环境不建议用777
}

// 3. 处理上传的文件
if (isset($_FILES['summernote_image']) && $_FILES['summernote_image']['error'] === UPLOAD_ERR_OK) {
    $file = $_FILES['summernote_image'];
    // 生成唯一文件名，避免重名覆盖
    $file_extension = pathinfo($file['name'], PATHINFO_EXTENSION);
    $unique_filename = uniqid('summernote_') . '.' . $file_extension;
    $target_file = $target_dir . $unique_filename;

    // 4. 将临时文件移动到目标文件夹
    if (move_uploaded_file($file['tmp_name'], $target_file)) {
        // 5. 返回图片的可访问URL（根据网站根目录调整路径）
        $image_url = '/your_custom_uploads/' . $unique_filename;
        echo json_encode(['image_url' => $image_url]);
    } else {
        http_response_code(500);
        echo json_encode(['error' => '无法保存图片到目标文件夹，请检查文件夹写入权限']);
    }
} else {
    http_response_code(400);
    echo json_encode(['error' => '文件上传失败，错误码：' . $_FILES['summernote_image']['error']]);
}
?>

关键注意事项 #

• 文件夹权限：必须确保你指定的上传文件夹有写入权限，否则后端无法保存图片。可以通过FTP工具设置权限为755，或者在服务器执行chmod -R 755 your_custom_uploads/。
• URL路径正确性：后端返回的image_url必须是前端能直接访问的路径，比如网站根目录是public，上传文件夹在public/your_custom_uploads/，那么URL就是/your_custom_uploads/xxx.jpg。
• 版本兼容性：主流Summernote版本的回调函数名都是onImageUpload，如果是非常老旧的版本可能有差异，建议确认版本后调整。
• 调试技巧：如果还是没触发上传，打开浏览器控制台（F12）查看是否有JS报错，或者检查ajax请求的响应信息，快速定位问题。

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