uniapp 自带 editor 上传图片不显示怎么解决？

在使用uniapp自带的editor组件上传图片时，图片上传成功后没有在编辑器中显示出来，请问这是什么原因？如何解决这个问题？

2 回复

检查图片路径是否正确，确保使用绝对路径。检查网络请求是否成功，若为本地图片需先上传至服务器再显示。可尝试在@ready事件中重新设置图片内容。


在 UniApp 中使用 editor 组件上传图片后不显示，通常是由于图片路径或上传逻辑问题导致的。以下是常见原因和解决方案：

1. 检查图片路径

确保上传后的图片路径是有效的网络 URL 或正确的本地路径。如果是本地临时路径，可能需要先上传到服务器再使用返回的 URL。

2. 使用 @ready 事件初始化编辑器

在 editor 组件的 @ready 事件中初始化编辑器实例，确保图片插入操作在编辑器准备就绪后进行。

<editor id="editor" @ready="onEditorReady"></editor>

methods: {
  onEditorReady() {
    // 编辑器准备就绪后可进行插入图片等操作
  }
}

3. 正确插入图片

通过 editorContext 的 insertImage 方法插入图片，确保 src 是有效路径。

// 获取编辑器上下文
const editorContext = uni.createSelectorQuery().select('#editor').context();

// 插入图片
editorContext.insertImage({
  src: 'https://example.com/image.jpg', // 替换为有效图片 URL
  alt: '图片描述',
  success: () => {
    console.log('图片插入成功');
  }
});

4. 处理本地图片上传

如果上传本地图片，需先通过 uni.chooseImage 选择图片，上传到服务器后获取网络 URL，再插入编辑器。

uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    // 上传图片到服务器（示例伪代码）
    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: tempFilePath,
      name: 'file',
      success: (uploadRes) => {
        const imageUrl = JSON.parse(uploadRes.data).url; // 假设返回数据包含 URL
        // 插入图片到编辑器
        editorContext.insertImage({
          src: imageUrl,
          alt: '上传图片'
        });
      }
    });
  }
});

5. 检查网络权限和域名

确保图片 URL 可公开访问，且 UniApp 的 manifest.json 中配置了合法的网络请求域名（如上传接口和图片域名）。

6. 使用基础路径

如果图片存储在本地 static 目录，使用相对路径或绝对路径（如 /static/image.jpg）。

总结

主要步骤：

  1. 确保编辑器初始化完成后再操作。
  2. 使用有效图片 URL（网络路径或正确本地路径）。
  3. 本地图片需先上传至服务器。

如果问题仍存在，检查控制台错误信息，确认是否有跨域、路径错误或上传失败等问题。

回到顶部