如何解决Summernote集成S3（兼容DigitalOcean Spaces）图片上传钩子失效问题？

1. 修正Summernote回调写法（核心问题） #

新版Summernote（v0.8.18+）的onImageUpload钩子需要放在callbacks对象内，且要避免和Backpack的默认初始化冲突：

在crud_fields_scripts钩子中替换为以下代码：

$(document).ready(function() {
  // 遍历所有Summernote实例（兼容Backpack的字段ID前缀）
  $('.summernote').each(function() {
    let $summernote = $(this);
    // 先销毁已有实例，避免配置冲突
    $summernote.summernote('destroy');
    // 合并原有配置与自定义回调
    let existingConfig = $summernote.summernote('option');
    $summernote.summernote($.extend({}, existingConfig, {
      callbacks: {
        ...(existingConfig.callbacks || {}),
        onImageUpload: function(files) {
          handleSummernoteImageUpload(files, $summernote);
        }
      }
    }));
  });
});

// 定义上传处理函数
function handleSummernoteImageUpload(files, $summernote) {
  let formData = new FormData();
  formData.append('image', files[0]);

  $.ajax({
    url: '{{ route("summernote.upload") }}', // 后端上传路由
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}' // 确保CSRF验证通过
    },
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      // 上传成功后插入图片到编辑器
      $summernote.summernote('insertImage', response.url);
    },
    error: function() {
      alert('图片上传失败，请检查后端配置');
    }
  });
}

2. 配置后端上传路由与控制器 #

2.1 添加Spaces磁盘配置 #

在config/filesystems.php的disks数组中添加DigitalOcean Spaces配置：

'disks' => [
    // ... 其他磁盘配置
    'spaces' => [
        'driver' => 's3',
        'key' => env('DO_SPACES_KEY'),
        'secret' => env('DO_SPACES_SECRET'),
        'region' => env('DO_SPACES_REGION'),
        'bucket' => env('DO_SPACES_BUCKET'),
        'url' => env('DO_SPACES_URL'),
        'endpoint' => env('DO_SPACES_ENDPOINT'),
        'use_path_style_endpoint' => false,
    ],
],

在.env中补充环境变量：

DO_SPACES_KEY=你的Spaces访问密钥
DO_SPACES_SECRET=你的Spaces密钥
DO_SPACES_REGION=nyc3（根据你的桶区域调整）
DO_SPACES_BUCKET=你的桶名称
DO_SPACES_URL=https://你的桶域名
DO_SPACES_ENDPOINT=https://nyc3.digitaloceanspaces.com（对应区域的端点）

2.2 编写上传控制器方法 #

创建或修改控制器，添加图片上传逻辑：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class SummernoteUploadController extends Controller
{
    public function upload(Request $request)
    {
        // 验证图片
        $request->validate([
            'image' => 'required|image|max:2048', // 限制2MB以内的图片
        ]);

        // 上传到Spaces，存储路径为summernote-images/文件名
        $filePath = $request->file('image')->store('summernote-images', 'spaces');

        // 返回图片的公开访问URL
        return response()->json([
            'url' => Storage::disk('spaces')->url($filePath)
        ]);
    }
}

2.3 注册上传路由 #

在routes/web.php中添加路由：

use App\Http\Controllers\SummernoteUploadController;

Route::post('/summernote/upload', [SummernoteUploadController::class, 'upload'])->name('summernote.upload');

3. 验证与排查 #

• 检查浏览器控制台：打开F12查看是否有JS报错，比如函数未定义、路由404等。
• 确认Summernote版本：查看页面加载的summernote.js版本，若低于v0.8.18，可改用旧版写法（直接把onImageUpload放在配置根节点）。
• 测试后端路由：用Postman直接请求上传路由，确认能正常返回图片URL。

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