您好,欢迎来到95分类目录!站长微信:vip3632094
当前位置:95分类目录 » 站长资讯 » 35dir专区 » 文章详细 订阅RssFeed

修复网址文章上传图片报错

来源:本站原创 浏览:100次 时间:2025-10-14
简介:前后台发文章的时候添加图片报错Cannot read properties of undefined (reading 'then')







前后台发文章的时候添加图片报错Cannot read properties of undefined (reading 'then')





 





ChatGPT 说:







你这段脚本整体没问题,TinyMCE 初始化和图片上传逻辑都写得对,但出现



Cannot read properties of undefined (reading 'then')
这种错误,说明某个地方调用了一个返回 Promise 的对象(或预期返回 Promise 的函数),但实际返回的是 undefined。结合你这段代码,问题 很可能出在 images_upload_handler 的返回值





? 问题原因分析


TinyMCE 6 的 images_upload_handler 必须返回一个 Promise,否则 TinyMCE 内部在处理图片上传时会试图调用 .then(),而你的函数当前并没有返回 Promise。


TinyMCE 官方文档说明(官方示例):



The custom images_upload_handler function must return a Promise, resolving with the image URL or rejecting with an error message.



你当前代码的写法是这样:





 



images_upload_handler: function (blobInfo, success, failure) {
const xhr = new XMLHttpRequest();
...
xhr.onload = function() { ... }
xhr.open('POST', 'upload.php?act=upload');
xhr.send(formData);
}


这段函数没有 return,因此返回值是 undefined,TinyMCE 在内部执行 images_upload_handler(...).then() 时就会报错。




✅ 正确写法


你需要改成 返回 Promise 的形式,例如:





 



images_upload_handler: function (blobInfo) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();

xhr.open('POST', 'upload.php?act=upload');
xhr.onload = function () {
if (xhr.status < 200 || xhr.status >= 300) {
reject('HTTP Error: ' + xhr.status);
return;
}

try {
const json = JSON.parse(xhr.responseText);
if (json && json.location) {
resolve(json.location);
} else {
reject('Invalid response: ' + xhr.responseText);
}
} catch (e) {
reject('Invalid JSON response: ' + e.message);
}
};

formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
});
},




? 补充建议




  1. 不要同时使用 success / failure 回调(那是 TinyMCE 5 旧版写法)。




    • TinyMCE 6 只需要返回 Promise。






  2. 服务器端返回格式必须是 JSON





     



    { "location": "https://example.com/uploads/xxx.jpg" }


    否则 TinyMCE 无法识别上传结果。




  3. 可在浏览器控制台确认返回值:





     



    console.log(xhr.responseText);






✅ 总结




  • ❌ 当前错误:images_upload_handler 没有返回 Promise。




  • ✅ 修复方案:改为返回 new Promise((resolve, reject) => { ... }) 并在内部调用 resolve(json.location)




这样就不会再出现 Cannot read properties of undefined (reading 'then') 这个错误了。






 





您说:







帮我把这段代码修复后完整的贴出来





 





ChatGPT 说:







当然可以 ?
下面是你提供的 完整修正版代码(基于 TinyMCE 6,支持中文、图片上传、Promise 结构正确、并保持你的原有配置和样式不变)?







 



<script type="text/javascript">
// TinyMCE 6 初始化 - 系统后台版本
document.addEventListener('DOMContentLoaded', function() {
function waitForTinyMCE() {
if (typeof tinymce === 'undefined') {
setTimeout(waitForTinyMCE, 100);
return;
}

tinymce.init({
selector: '#art_content',
language: 'zh_CN',
height: 400,
menubar: false,
branding: false,

plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'table', 'wordcount'
],

toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' +
'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ' +
'link image table | code preview fullscreen | removeformat',

content_style: `
body {
font-family: "微软雅黑", Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
margin: 10px;
}
img { max-width: 100%; height: auto; }
p { margin: 0 0 10px 0; }
h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px 0; font-weight: bold; }
`
,

// 图片上传配置
images_upload_url: 'upload.php?act=upload',
images_upload_handler: function (blobInfo) {
// ✅ TinyMCE 6 要求必须返回 Promise
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();

xhr.open('POST', 'upload.php?act=upload');
xhr.onload = function() {
if (xhr.status < 200 || xhr.status >= 300) {
reject('HTTP Error: ' + xhr.status);
return;
}

try {
const json = JSON.parse(xhr.responseText);
if (json && json.location) {
resolve(json.location);
} else {
reject('Invalid response: ' + xhr.responseText);
}
} catch (e) {
reject('Invalid JSON response: ' + e.message);
}
};

xhr.onerror = function() {
reject('Image upload failed due to a network error.');
};

formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
});
},

setup: function(editor) {
editor.on('init', function() {
console.log('✅ TinyMCE 系统编辑器初始化完成');
});
}
});
}

waitForTinyMCE();
});
script>




✅ 改进说明




  • 修复错误:旧代码没有返回 Promise,TinyMCE 内部在 .then() 时出错。




  • 现代写法:去掉 success / failure(那是 TinyMCE 5 的写法)。




  • 新增错误处理xhr.onerror 捕获网络错误,防止无响应时卡死。




  • 保持你的样式和功能完全一致(中文界面、编辑器样式、上传逻辑)。










© 版权声明

💬 文章评论

正在加载评论统计...

发表评论

0/1000字符
正在加载评论...
🆕最新收录 📚数据归档 🔥TOP排行 🚫黑名单 不通过 📊数据公示 🗺️站点地图

95分类目录 - 专业的网站分类目录平台,精心收录 网站目录VIP优质网站站长资讯

关键词:网站目录 · 网站收录 · 分类目录 · 网站推荐 · 优质网站 · 免费收录

Monitor your Domain Rating with FrogDR
Copyright © 2026 95dir.com All Rights Reserved · 鄂ICP备2024062716号-1 · Processed in 0.165818 second(s), 27 Queries, Gzip Enabled
当前在线 ...| 总访客 ...| 🐧交流群
百度统计