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. 使用组件

其中 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', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{header: 1}, {header: 2}], // 1、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: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 链接、图片、视频
          ],
        },

此处需要使用自己的上传接口，下面为前端上传接口示例：

export const uploadFileAPI = (data) => {
  return request({
    url: "/file/upload",
    method: "post",
    data,
    headers: { // 如果接口报错，检查是不是加了这个参数
      "Content-Type": "multipart/form-data"
    }
  })
}

后端接口示例（此处使用的为本地 nginx 文件服务器，可替换为云服务器地址）：

final String UPLOAD_DIRECTORY = "D:/Project/FileServer/"; // 此处为本地存储路径示例
final String BASE_URL = "http://localhost:9090/"; // 本地文件服务器 url
@PostMapping("/upload")
public R uploadFile(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return R.failed("请选择要上传的文件");
   }

   try {// 获取原始文件名
      String originalFilename = file.getOriginalFilename();
      // 生成新的文件名，以防止文件名冲突
      String newFilename = null;
      if (originalFilename != null) {newFilename = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
      }

      // 文件保存路径
      String filePath = UPLOAD_DIRECTORY + newFilename;
      // 保存文件到服务器
      file.transferTo(new File(filePath));

      // 返回文件上传成功的相关信息
      Map res = new HashMap();
      res.put("fileName", newFilename);
      res.put("filePath", BASE_URL + newFilename);
      return R.ok(res, "上传成功");
    } catch (Exception e) {return R.failed("文件上传失败:" + e.getMessage());
    }
}

5. 汉化富文本工具栏

/deep/ .ql-snow .ql-tooltip[data-mode=link]::before {content: "请输入链接地址:";}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

/deep/  .ql-snow .ql-tooltip[data-mode=video]::before {content: "请输入视频地址:";}

/deep/  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px';}
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {content: '10px';}
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {content: '18px';}
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
/deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {content: '32px';}

/deep/  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本';}
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: '标题 1';}
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: '标题 2';}
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: '标题 3';}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题 4";}
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: '标题 5';}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: '标题 6';}

/deep/  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/  .ql-snow .ql-picker.ql-font .ql-picker-item::before {content: '标准字体';}
/deep/  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
/deep/  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {content: '衬线字体';}
/deep/  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
/deep/  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {content: '等宽字体';}
/deep/  .ql-align-center{text-align: center;}
/deep/  .ql-align-right{text-align: right;}
/deep/  .ql-align-left{text-align: left;}