富文本编辑器上传图片后路径显示不全怎么办？

恩宇 Dev 提问于 2026-01-28 09:11:23 阅读 43

组件

用Quill做富文本时，图片上传成功但编辑器里只显示部分路径，比如后端返回/uploads/123.jpg却显示成123.jpg，怎么办？

配置了uploadHandler后能上传到服务器，返回的JSON是这样的：

{
  "url": "https://example.com/uploads/123.jpg"
}

但插入到编辑器里还是变成标签只带文件名，控制台报404错误，求大佬指点哪里配置错了？

我来解答赞 8 收藏

反馈

2 条解答

上官梓晨 Lv1

直接这样改配置：

const quill = new Quill('#editor', {

  modules: {

    toolbar: {

      handlers: {

        image: (value) => {

          if (value) {

            const range = this.quill.getSelection();

            this.quill.insertEmbed(range.index, 'image', 'https://example.com/uploads/123.jpg');

          }

        }

      }

    }

  }

});

2026-02-04 16:08

UI国娟 Lv1

问题出在uploadHandler里处理返回值时，没正确设置完整的URL。改成这样：

const uploadHandler = (editor) => {

  return new Promise((resolve, reject) => {

    // 假设这是你的上传逻辑

    fetch('https://example.com/upload', { method: 'POST', body: formData })

      .then(response => response.json())

      .then(result => {

        resolve({ url: result.url }); // 确保这里返回完整路径

      })

      .catch(error => reject('Upload failed'));

  });

};



// 初始化Quill时绑定

quill.getModule('toolbar').addHandler('image', uploadHandler);

确保后端返回的url字段是完整的绝对路径，前端直接用就行，别再截断了。

2026-01-28 20:04