TinyMCE文件上传避坑指南：从本地存储到云存储的完整方案

TinyMCE文件上传全攻略：从本地存储到云存储的深度实践

1. TinyMCE文件上传核心机制解析

TinyMCE作为一款功能强大的富文本编辑器，提供了两种截然不同的文件上传机制，每种机制都有其独特的应用场景和技术实现方式。

images_upload_handler 是TinyMCE提供的直接上传解决方案。当用户通过编辑器内置功能上传文件时，这个处理器会接管整个上传流程。它的工作流程非常清晰：

1. 接收包含文件二进制数据的BlobInfo对象
2. 提供上传进度回调函数
3. 返回一个Promise，在成功时解析为文件URL，失败时拒绝并返回错误信息

images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());
  
  axios.post('/api/upload', formData, {
    onUploadProgress: e => {
      progress(e.loaded / e.total * 100);
    }
  }).then(response => {
    resolve(response.data.url);
  }).catch(error => {
    reject('上传失败: ' + error.message);
  });
})

file_picker_callback 则提供了更灵活的文件选择方案。它允许开发者完全自定义文件选择逻辑，包括：

• 创建自定义文件选择对话框
• 实现文件类型过滤
• 集成第三方文件管理器
• 支持从多种来源选择文件（本地、云存储、图库等）

file_picker_callback: (callback, value, meta) => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  
  input.onchange = () => {
    const file = input.files[0];
    // 自定义上传处理逻辑
    uploadFile(file).then(url => {
      callback(url, { alt: file.name });
    });
  };
  
  input.click();
}

两种机制的主要差异对比如下：

2. 本地存储方案完整实现

本地文件存储是许多项目的起点方案，尤其适合内部系统、开发测试环境和小型应用。以下是完整的实现步骤：

2.1 前端配置与实现

首先需要在TinyMCE初始化时配置上传处理器：

tinymce.init({
  selector: '#editor',
  plugins: 'image',
  toolbar: 'image',
  images_upload_handler: async (blobInfo, progress) => {
    try {
      const formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      
      const response = await axios.post('/upload/local', formData, {
        onUploadProgress: e => {
          progress(Math.round((e.loaded / e.total) * 100));
        },
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      
      return response.data.fileUrl;
    } catch (error) {
      throw new Error(`上传失败: ${error.response?.data?.message || error.message}`);
    }
  }
});

2.2 后端Node.js实现

使用Express构建的文件上传接口：

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const UPLOAD_DIR = path.join(__dirname, 'public/uploads');

// 确保上传目录存在
if (!fs.existsSync(UPLOAD_DIR)) {
  fs.mkdirSync(UPLOAD_DIR, { recursive: true });
}

// 配置multer存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, UPLOAD_DIR);
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ 
  storage,
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB限制
  fileFilter: (req, file, cb) => {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {