使用tinymce无法展示后端成功返回的图片

Question

在tinymce插件中自定义图片上传的时候，后端已经成功返回location:'图片的访问地址'，为什么就是无法展示还报错

代码改来改去就是会有这种问题是为啥啊

images_upload_handler: async (blobInfo, success, failure) => {
    try {
      console.log('.blob(), blobInfo.filename()',blobInfo.blob(), blobInfo.filename());
      
      const formdata = new FormData()
      formdata.append('file',blobInfo.blob(), blobInfo.filename())
      const response = await fetch('http://127.0.0.1:8080/upload/image', {
      method: 'POST',
      body: formdata, // 直接传 FormData，浏览器自动加正确的 Content-Type
      // credentials: 'same-origin' // 和原生上传保持一致的跨域凭证设置
    });
    const data = await response.json();
    console.log('data------------111111111111111',data);
    } catch (err) {
      failure('上传出错：' + (err.message || '网络异常'))
    }
  },

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

Tinymce图片上传问题通常是由于图片地址不正确或 Tinymce 配置不全导致的。下面是一些常见的解决方案：

1. 检查图片地址：确保后端返回的图片地址是正确的，包括协议、域名、路径等。
2. 配置 Tinymce：检查 Tinymce 的配置文件，确保有以下配置：

tinymce.init({
  selector: 'textarea',
  images_upload_url: '/api/upload', // 后端图片上传接口
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.open('POST', '/api/upload', true);
    xhr.onload = function() {
      var response = JSON.parse(xhr.responseText);
      if (xhr.status === 200) {
        success(response.location);
      } else {
        failure('HTTP Error: ' + xhr.status);
      }
    };
    formData = new FormData();
    formData.append('file', blobInfo.blob());
    xhr.send(formData);
  }
});

1. 检查后端接口：确保后端接口返回正确的图片地址和状态码（200）。
2. 检查浏览器缓存：清除浏览器缓存，重新加载页面。

如果以上解决方案仍然无法解决问题，请提供更多的代码和详细的错误信息，以便更好地帮助您解决问题。