TinyMCE 6上传图片生成data:image，上传脚本失效的解决问询

核心原因排查与修复步骤 #

1. 开启自动上传配置 #

你的配置里automatic_uploads: false是关键问题：这个参数控制粘贴/拖拽图片时是否自动调用上传脚本。设为false时，TinyMCE会直接把图片转成base64的data URI插入，完全不会触发images_upload_handler。

修改配置：

automatic_uploads: true,

2. 确认上传脚本的有效性 #

• 打开浏览器控制台检查是否有JS报错：比如example_image_upload_handler有没有在tinymce.init之前正确定义，有没有变量未定义的情况。
• 验证XHR请求是否发送：打开开发者工具的Network标签，上传图片时看是否有发送到/p/account/project-post-image-upload的POST请求。如果没有，说明脚本没被触发；如果有，检查接口返回的状态码和响应格式是否符合要求（必须返回带location字段的JSON）。

3. 检查图片上传触发逻辑 #

• 若通过图片对话框的「上传」标签上传：确保image_uploadtab: true已保留，这个配置会显示上传选项卡，点击上传时会调用自定义handler。
• 若通过粘贴/拖拽上传：必须开启automatic_uploads: true，否则只会生成data URI。

4. 验证服务器端接口 #

确保后端接口/p/account/project-post-image-upload：

• 能正确接收FormData里的tinymce_file_upload字段
• 返回200状态码，且响应体为{"location": "图片的绝对/相对URL"}格式
• 没有跨域限制（如果前端和后端域名不同，需配置CORS）

调整后的关键配置片段 #

tinymce.init({
  // ...其他原有配置
  image_uploadtab: true,
  images_upload_handler: example_image_upload_handler,
  images_file_types: 'jpeg,jpg,png,gif',
  automatic_uploads: true, // 修改为true，开启自动上传
  // ...其他原有配置
});

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