TinyMCE+Axios图片上传时出现cannot read properties of undefined错误

我在React中使用TinyMCE编辑器，通过axios.post将上传的图片发送到后端RestAPI保存，后端返回包含图片路径的JSON响应。功能正常运行，但每次都会弹出错误提示：cannot read properties of undefined (reading 'then')，虽然不影响功能，但弹窗反复出现需要手动关闭，十分困扰。

错误原因 #

TinyMCE的images_upload_handler要求异步处理时必须返回一个Promise，否则编辑器会默认尝试对handler的返回值调用.then()方法。当前你的handler函数没有返回任何值（默认返回undefined），导致编辑器调用undefined.then()时抛出错误。

修复后的图片上传处理函数 #

const imageUploadHandler = (blobInfo, success, failure, progress) => {
  // 返回Promise包裹异步逻辑，让TinyMCE识别异步状态
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onloadend = () => {
      const arrayBuffer = reader.result;
      const file = new File([arrayBuffer], blobInfo.filename(), { type: blobInfo.blob().type });

      const formData = new FormData();
      formData.append('file', file);

      axios.post('http://localhost:8001/reviews/imageUpload', formData)
        .then((res) => {
          console.log("Image upload successful:", res.data);
          const fileName = res.data.imageUrl;
          console.log("file name? : ", fileName);

          // 调用TinyMCE的success回调，编辑器会自动替换临时图片为正式路径
          success(fileName);
          resolve(fileName);
        })
        .catch((error) => {
          console.error('Error during image upload:', error);
          failure('Image upload failed');
          reject(error);
        });
    };

    reader.readAsArrayBuffer(blobInfo.blob());
  });
};

关键修改说明 #

1. 添加Promise返回值：用Promise包裹整个异步流程，让TinyMCE能正确追踪上传状态，避免调用undefined.then()的错误。
2. 移除手动DOM操作：原代码中手动修改iframe内图片src的逻辑是冗余的，TinyMCE的success回调会自动将编辑器中的临时图片（data/blob协议）替换为你传入的正式路径，无需手动操作DOM。
3. 简化数据转换：readAsArrayBuffer的结果本身就是ArrayBuffer，无需额外转Uint8Array，直接用于创建File对象即可。

保留原TinyMCE配置（确保handler引用正确） #

return (
  <Editor
    apiKey='iokd75awv5mkifdb3j4qp387rw27smpbjgoawllblis65mrq'
    init={{
      images_upload_handler: imageUploadHandler,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | blocks | ' +
      'bold italic backcolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      'removeformat | help',
      language: 'ko_KR',
      ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
      setup: function (editor) {
        editor.on('error', function (e) {
          console.error('TinyMCE Error:', e);
          e.preventDefault();
        });
      },
    }}
    initialValue={initialContent}
    onEditorChange={handleEditorChange}
  />
);

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