如何删除Editor.js自定义音频块时同步删除服务器文件夹内音频文件？

前端修改（React + EditorJS） #

1. 监听块删除事件并触发删除请求 #

你可以在EditorJS初始化时绑定blockRemoved事件，识别删除的是音频块后，调用后端接口删除对应文件：

// 初始化EditorJS实例
const editor = new EditorJS({
  // 原有配置...
  tools: {
    audio: CustomAudioPlayer
  },
  onReady: () => {
    // 监听块删除事件
    editor.listeners.on('blockRemoved', async (block) => {
      // 判断删除的是否为音频块
      if (block.tool === 'audio') {
        const audioUrl = block.data.url;
        await sendDeleteRequest(audioUrl);
      }
    });
  }
});

// 封装删除请求函数
async function sendDeleteRequest(audioUrl) {
  const token = localStorage.getItem("token");
  try {
    await axios.delete("/api/audio/remove", {
      headers: {
        "Authorization": `Bearer ${token}`
      },
      data: {
        url: audioUrl
      }
    });
  } catch (error) {
    console.error("删除音频文件失败:", error);
  }
}

也可以直接在自定义音频工具类内部绑定监听：

class CustomAudioPlayer  {
    data: any;
    api: any;
    editorRef: any;
    constructor({data, api}) {
        this.data = data;
        this.api = api;
        this.editorRef = api.editor;
        
        // 监听当前块删除事件
        this.api.listeners.on('blockRemoved', (block) => {
          // 匹配当前块的音频URL
          if (block.data.url === this.data.url) {
            this.deleteServerAudio();
          }
        });
    }

    // 新增删除服务器文件方法
    async deleteServerAudio() {
      const token = localStorage.getItem("token");
      try {
        await axios.delete("/api/audio/remove", {
          headers: {
            "Authorization": `Bearer ${token}`
          },
          data: {
            url: this.data.url
          }
        });
      } catch (error) {
        console.error("删除音频文件失败:", error);
      }
    }

    // 原有方法...
}

后端实现（Laravel） #

1. 添加API路由 #

在routes/api.php中添加删除路由：

use App\Http\Controllers\AudioController;

Route::delete('/audio/remove', [AudioController::class, 'deleteFile'])->middleware('auth:api');

2. 编写控制器删除逻辑 #

创建或修改AudioController，实现文件删除：

<?php

namespace App\Http\Controllers;

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

class AudioController extends Controller
{
    public function deleteFile(Request $request)
    {
        $audioUrl = $request->input('url');
        
        // 转换URL为服务器存储路径（根据你的实际存储结构调整）
        // 假设音频URL格式为：https://your-domain/storage/audio/xxx.mp3
        $relativePath = str_replace(url('storage/'), '', $audioUrl);
        $storagePath = 'public/' . $relativePath;

        if (Storage::exists($storagePath)) {
            Storage::delete($storagePath);
            return response()->json(['status' => 'success'], 200);
        }

        return response()->json(['status' => 'error', 'msg' => '文件不存在'], 404);
    }
}

注意事项 #

• 调整路径转换逻辑，确保和你实际的文件存储目录匹配
• 确保Laravel的文件系统配置（config/filesystems.php）正确，可访问到目标存储位置
• 接口已通过auth:api中间件做身份验证，防止非法删除

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