React-Quill中的图片上传及显示

最新推荐文章于 2025-06-27 14:49:55 发布

夜深人静敲代码

最新推荐文章于 2025-06-27 14:49:55 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 react 文章标签： base64 前端富文本编辑器

本文链接：https://blog.youkuaiyun.com/song279811799/article/details/78847320

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文讲述了如何在React-Quill富文本编辑器中处理Base64编码的图片，将其保存到文件服务器并用新URL替换。通过遍历Delta数据，将Base64图片转换为Blob上传，再用后端返回的URL更新Delta，减少存储大小。前端展示时，可将Delta数据转换回JSON，处理图片添加点击放大功能，实现富文本的完整显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两篇文章介绍了在Quill中使用贴图模块，这篇文章我们说下怎样把base64编码的图片保存到文件服务器，并且用新的地址替换原来的base64。

上文说道在Quill的onChange函数中可以除了普通的DOM，还可以通过editor.getContents()获取Delta类型的数据。他基本上和json差不多，我们可以对其进行处理，进行图片的处理。

Quill-Delta的文档：https://quilljs.com/docs/delta/

通过调试或者看官方文档，可以知道对于图片类型的数据，结构是:

{
  ops: [{
    // An image link
    insert: {
      image: 'https://quilljs.com/assets/images/icon.png'
    },
  }]
}

对于base64编码的图片，那上面的image的值对应的就是base64的一长串数据。

这样，我们就可以通过遍历，获取到所有的base64编码图片（注意要筛掉url地址的图），然后可以转换成Blob类型，传给后端保存在文件服务器。下面是转化格式的代码：

convertBase64UrlToBlob = (urlData) => {
    //去掉url的头，并转换为byte
    const bytes = window.atob(urlData.split(',')[1]);
    //处理异常,将ascii码小于0的转换为大于0
    const ab = new ArrayBuffer(bytes.length);
    const ia = new Uint8Array(ab);
    ia.forEach((i, index) => {
      ia[index] = bytes.charCodeAt(index);
    });
    return new Blob([ia], { type: urlData.split(',')[0].split(':')[1].split(';')[0] });
};

至于上传的方法有很多，这里就不详述了，我用的是reqwest，然后我们拿到图片的url地址，依次替换Delta中的base64，这样我们拿到的Delta数据就没有那么大了，可以保存到数据库中了。注意要转成string，如JSON.stringify(Delta.ops)。

这样是可以保存了，但我们要如何在前端中去展现输入的数据呢？我的办法是：

首先从后端拿到Delta的string，然后再次利用JSON.parse(Delta)转回json格式。这样我们就可以对其进行操作了。如果不需要对数据进行特殊处理，可以直接转换成DOM结构然后直接渲染到网页中。

转Delta到DOM：https://github.com/nozer/quill-delta-to-html

// 引入quill-delta-to-html
const QuillDeltaToHtmlConverter = require('quill-delta-to-html');
// 转换Delta到html，更多功能请看上面链接中的介绍
const converter = new QuillDeltaToHtmlConverter(delta, {});
const html = converter.convert();

// 利用dangerouslySetInnerHTML渲染DOM，注意要对进行过滤转换，防止脚本攻击
<div dangerouslySetInnerHTML={{__html: `${this.escape(html)}`}}/>

这样我们就把Delta的数据显示到了网页中，如果我们想要对处理，假设对于图片想加一个点击放大查看的功能，就可以对Delta进行遍历，普通内容依照上面的方法显示，对于图片则用组件进行封装。

React图片查看组件：https://github.com/fritz-c/react-image-lightbox

功能和使用都很简单，代码如下：

import Lightbox from 'react-image-lightbox';

<div>
    <img
      src={item.insert.image}
      width="300px"
      style={{display: 'block'}}
      alt={HAP.getMessage('图片加载中...', 'Image Loading...')}
      onClick={() => this.onOpenLightboxChange()}
    />
    {this.state.isOpen ?
      <Lightbox
        mainSrc={item.insert.image}
        onCloseRequest={() => this.onOpenLightboxChange()}
        imageTitle={'images'}
      /> : ''}
</div>

通过onOpenLightboxChange函数控制isOpen来显示和隐藏lightbox。效果如图：

这里写图片描述

到这里，使用Quill富文本编辑器对图片的一系列处理都说完了。

我还找到了Quill的表情模块，但还没去研究怎么在react中使用。

Quill-Emoji：https://github.com/contentco/quill-emoji