Vue-Quill-Editor（富文本编辑器）将图片从base64变成正常图片链接

vue-quill-editor插入图片的方式是将图片转为base64再放入内容中，这样就会产生一个问题，如果图片比较大的话，富文本的内容就会很大，内容存在数据库中的，这样一来，一方面会占用大量的数据库存储空间，另一方面当图片太大的时候富文本的内容，会超过数据库的存储上限，从而会产生内容被截断从而显示不全的问题（即使是text类型，也有存储上限65535）。

那么问题来了，如何将图片上传到自己的服务器或第三方服务，然后将获得的图片url插入到文本中呢？大致有两个方法，其一是将任务交给服务端，服务端截取base64图片并转化为文件，将其路径或者url替换原来的图片数据；其二是对控件本身下手，首先将图片上传，然后插入到富文本中。

如果没有安装富文本编辑器(可通过链接查看)

//这是在页面中引入富文本编辑器
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"
 style="height: 600px; margin-bottom: 65px"></quill-editor>

==============================================================
富文本图片上传加强模块：quill-image-extend-module
参考地址：https://github.com/NextBoy/quill-image-extend-module

第一步Install

使用npm或者yarn安装quill-image-extend-module

npm install quill-image-extend-module --save-dev
yarn add quill-image-extend-module

第二步在Vue的script标签中中引入

(注意，这个需要引入到有富文本编辑器的对应的那个vue文件中)

  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)

第三步data()中放入下面的代码

参数说明:

1.action:"后台接口地址"(请求地址的Api)

2.name: "后台接口地址参数name"(Api的请求体)

3.下面代码中headers请求头去掉注释,设置对应的请求头参数

content:"",
editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "后台接口地址参数name",
            size: 0.02,
            action: "后台接口地址",
            response: res => {
              return res.data.fileUrl;
            },
            headers: (xhr,formData) => {
              //xhr.setRequestHeader(
              //  "X-Nideshop-Token",
              //  localStorage.getItem("token")
              //);
            }, // 可选参数 设置请求头部
            sizeError: () => {
              return this.$message.error("图片超过50kb");
            } // 图片超过大小的回调
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 几级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下角标，上角标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字输入方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 颜色选择
              [{ font: [] }], // 字体
              [{ align: [] }], // 居中
              ["link", "image"],
              ["clean"]
            ],
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      }

富文本上传后产生的base64图片.png

转换后对应的图片链接.png

此时发送请求之后返回的就是一个正常的图片地址了~

最后编辑于：2020.10.25 22:20:19