直接复制粘贴至Summernote编辑器的图片上传与显示异常问题

问题现象 #

• 粘贴图片时，编辑器内显示未知图片占位符
• AJAX上传图片至服务器后，从服务器取回展示仍显示异常或乱码

核心问题分析 #

1. 后端URL生成错误：拼接的图片访问路径层级混乱，导致浏览器无法正确解析图片地址
2. 粘贴事件未处理：仅监听了工具栏上传图片事件，未处理剪贴板粘贴图片的逻辑
3. 目录权限缺失：服务器图片存储目录可能无写入权限，导致图片上传失败

具体修复步骤 #

一、修复后端PHP的URL生成逻辑

修改editor-upload.php中生成图片URL的代码，避免路径层级错误，同时确保存储目录存在：

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if (isset($_FILES['file']['name'])) {
    if (!$_FILES['file']['error']) {
        $name = rand(100, 1000) . '_' . date('Ymd');
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name . '.' . $ext;
        $destination = '../testimage/' . $filename;
        $location = $_FILES["file"]["tmp_name"];
        
        // 自动创建不存在的存储目录
        if (!file_exists(dirname($destination))) {
            mkdir(dirname($destination), 0755, true);
        }
        
        if (move_uploaded_file($location, $destination)) {
            // 修正URL生成逻辑，去掉相对路径中的../，拼接正确的访问地址
            $publicPath = str_replace('../', '', $destination);
            $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/' . $publicPath;
            echo $url;
        } else {
            echo 'Error occurred while moving the uploaded file.';
        }
    } else {
        echo 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error'];
    }
} else {
    echo 'No file was uploaded.';
}
?>

补充：确保testimage目录拥有写入权限，可通过服务器命令chmod 755 ../testimage设置

二、添加粘贴图片事件处理

修改前端JS代码，监听剪贴板粘贴事件，提取图片文件并调用上传逻辑：

<script>
$(document).ready(function() {
    var editor = $("#summernote");

    editor.summernote({
      spellCheck: true,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'italic']],
        ['insert', ['link', 'picture']],
      ],
      height: 300,
      callbacks: {
        // 处理工具栏上传图片
        onImageUpload: function(files) {
            sendFile(files[0], editor);
        },
        // 处理剪贴板粘贴图片
        onPaste: function(e) {
            var clipboardData = e.originalEvent.clipboardData;
            if (clipboardData && clipboardData.items) {
                for (var i = 0; i < clipboardData.items.length; i++) {
                    var item = clipboardData.items[i];
                    if (item.type.indexOf('image') !== -1) {
                        e.preventDefault(); // 阻止默认粘贴行为
                        var file = item.getAsFile();
                        sendFile(file, editor);
                        break;
                    }
                }
            }
        }
      }
    });
});

function sendFile(file, editor) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
      data: data,
      type: "POST",
      url: "editor-upload.php",
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        var imageUrl = response.trim();
        // 使用Summernote内置方法插入图片，替代手动拼接HTML
        if (imageUrl.startsWith('http')) {
            editor.summernote('insertImage', imageUrl);
        } else {
            alert('图片上传失败：' + response);
        }
      },
      error: function(xhr, status, error) {
        alert("图片上传失败：" + error);
      }
    });
}
</script>

三、调试验证步骤

1. 打开浏览器开发者工具（F12），切换到Network标签
2. 粘贴或上传图片，查看请求的响应内容，确认返回的图片URL是否正确
3. 直接在浏览器地址栏访问该URL，检查图片能否正常显示
4. 查看服务器testimage目录，确认图片是否成功上传

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