Vue3使用vue-quill富文本编辑器并实现图片自定义上传替换默认base64格式图片

本文介绍在vue3环境下使用vue-quill富文本编辑器，并实现使用自定义上传接口将图片上传至服务器并保存为img标签src为服务器中图片的地址而不是默认的base64格式图片。从而解决富文本编辑器使用base64导致字段超长问题。

1.安装依赖库

npm install @vueup/vue-quill --save
npm install quill-image-uploader --save

vue-quill为基础富文本组件

quill-image-uploader为图片上传扩展模块

2.引入组件

//局部引入
import { QuillEditor, Quill } from '@vueup/vue-quill';
import ImageUploader from "quill-image-uploader";
import '@vueup/vue-quill/dist/vue-quill.snow.css';
Quill.register("modules/imageUploader", ImageUploader);
export default {
  components: {
    QuillEditor
  },
}

3.使用组件

<quill-editor
   class="ql-editor"
   :options="editorOption"
   v-model:content="form.content"
   content-type="html">
</quill-editor>

其中content-type设置为html后v-model绑定的值则自动获取到为带html标签的文本

4.配置图片上传以及富文本组件

editorOption: {
        modules: {
          imageUploader: {
            upload: async (file) => {
              let res = await uploadFileAPI({file}) // 此处为自己的上传接口
              return res.data.filePath // 此处替换为接口返回的文件路径
            }
          },
          toolbar: [
            ['bold', 'italic', 'underline&#