Markdown编辑器上传图片后路径显示404怎么办？

宇文世杰提问于 2026-02-15 15:39:27 阅读 14

交互

在用Quill.js实现Markdown编辑器时，用户上传图片用FileSaver保存为base64格式，但渲染后图片路径显示404错误。明明保存成功了啊，控制台提示GET blob:null/xxx.jpg 404 (NOT FOUND)。

尝试过直接把base64字符串塞进标签，但Markdown渲染后自动转成普通路径。查了文档发现需要自定义Blot，但不知道怎么正确绑定本地文件路径。难道要改marked.js的解析规则吗？

测试代码大概是这样：


const ImageBlot = Quill.import('blots/image');
class Base64Image extends ImageBlot {
  static create(value) {
    const img = super.create();
    img.src = value; // 这里直接赋base64字符串
    return img;
  }
}
Quill.register(Base64Image);

但保存后生成的Markdown内容变成![image](blob:null/xxx.jpg)，刷新页面就找不到了，这明明是临时对象的问题吧？

我来解答赞 4 收藏

反馈

1 条解答

Des.沁仪 Lv1

这个问题的根本原因是浏览器的blob对象是临时的，页面刷新后就失效了，所以你看到404错误。要解决这个问题，建议把图片上传到服务端存储，而不是依赖前端的临时blob对象。

具体做法是这样：首先在服务端搭一个图片上传接口，可以用类似AWS S3或者本地存储来存图片。然后修改你的Quill配置，添加一个自定义的图片处理逻辑。



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

  modules: {

    toolbar: {

      handlers: {

        image: imageHandler

      }

    }

  }

});



function imageHandler() {

  const input = document.createElement('input');

  input.setAttribute('type', 'file');

  input.setAttribute('accept', 'image/*');

  input.click();



  input.onchange = async () => {

    const file = input.files[0];

    const formData = new FormData();

    formData.append('image', file);



    // 这里调用服务端上传接口

    const res = await fetch('/api/upload-image', {

      method: 'POST',

      body: formData

    });

    const data = await res.json();



    // 拿到服务端返回的图片url

    const imageUrl = data.url;



    const range = this.quill.getSelection();

    this.quill.insertEmbed(range.index, 'image', imageUrl);

  };

}

服务端这边需要写个简单的上传接口，以Node.js为例：



const express = require('express');

const multer = require('multer');

const path = require('path');



const app = express();

const upload = multer({ dest: 'uploads/' });



app.post('/api/upload-image', upload.single('image'), (req, res) => {

  const tempPath = req.file.path;

  const targetPath = path.join(__dirname, 'public/images', req.file.originalname);



  // 把临时文件移动到永久存储位置

  fs.rename(tempPath, targetPath, (err) => {

    if (err) return res.status(500).json({ error: 'File upload failed' });



    // 返回图片的访问地址

    const imageUrl = /images/${req.file.originalname};

    res.json({ url: imageUrl });

  });

});

记得在服务端配置静态资源目录，让图片能被正常访问。这样做完之后，图片就会以永久URL的形式保存在Markdown内容里，刷新页面也不会丢失了。虽然看起来改动有点多，但这是最靠谱的解决方案。直接用base64确实省事，但对性能和数据库都不友好，特别是大图的时候。

2026-02-15 16:00