在Quill JS（React）中使用Base64内联图片时保留文件名的方法

完全可以通过自定义Quill的图片上传逻辑实现需求，核心思路是替换默认的图片上传流程，手动处理文件选择、Base64转换，并给生成的<img>标签添加data-filename属性来存储原始文件名。具体实现如下：

实现步骤 #

1. 拦截工具栏的图片按钮点击事件，替换默认的系统文件弹窗
2. 自定义文件选择逻辑，获取图片文件的原始名称和Base64编码数据
3. 将带有data-filename属性的图片标签插入编辑器

修改后的完整代码 #

useEffect(() => {
  if (editorRef.current && !quillInstance.current) {
    quillInstance.current = new Quill(editorRef.current, {
      placeholder: 'Type your message here...',
      theme: 'snow',
      modules: {
        toolbar: [
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline', 'strike', 'blockquote'],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'align': [] }],
          ['link', 'image'],
          ['clean'],
          ["table-better"],
        ],
        table: false,
        "table-better": {
          language: "en_US",
          bounds: document.body,
          menus: [
            "column",
            "row",
            "merge",
            "table",
            "cell",
            "wrap",
            "copy",
            "delete",
          ],
          toolbarTable: true,
        },
        imageResizer: {
          modules: ['Resize', 'DisplaySize', 'Toolbar'],
        },
        toggleFullscreen: {
          buttonTitle: 'Toggle fullscreen',
        },
      }
    });

    // 自定义图片上传逻辑
    const quill = quillInstance.current;
    const toolbar = quill.getModule('toolbar');
    
    // 监听图片按钮点击，替换默认行为
    toolbar.addHandler('image', () => {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'image/*';
      
      fileInput.onchange = () => {
        const file = fileInput.files[0];
        if (!file) return;
        
        // 读取文件为Base64格式
        const reader = new FileReader();
        reader.onload = (e) => {
          const base64Src = e.target.result;
          const filename = file.name;
          
          // 获取光标位置，插入图片
          const range = quill.getSelection();
          if (range) {
            quill.insertEmbed(range.index, 'image', base64Src);
            // 给刚插入的图片添加data-filename属性
            const imgElement = quill.root.querySelector(`img[src="${base64Src}"]`);
            if (imgElement) {
              imgElement.setAttribute('data-filename', filename);
            }
          }
        };
        reader.readAsDataURL(file);
      };
      
      // 触发文件选择弹窗
      fileInput.click();
    });
  }
}, []);

后端处理方式 #

当把编辑器的HTML内容发送到Python后端后，可以通过以下方式提取文件名和图片数据：

• 使用BeautifulSoup解析HTML内容，遍历所有<img>标签
• 从data-filename属性获取原始文件名，从src属性提取Base64数据（注意去除data:image/xxx;base64,前缀）
• 将Base64字符串转为二进制文件，用提取到的文件名作为附件名称

内容的提问来源于stack exchange，提问作者Ajith Kumar R