解决quill-image-drop-module拖拽上传显示2张图片问题

业务场景说明：

vue3中使用vue-quill、quill-image-extend-module结合图片上传实现了quill-editor插入图片功能。

期望通过引用quill-image-drop-module插件，拖拽图片到编辑器，实现图片上传并插入到编辑器中。

1.插件的使用

安装插件依赖包

npm install quill-image-drop-module  -S 

页面使用

// 图片拖拽上传
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageDrop', ImageDrop)

2.问题描述

拖拽图片到编辑器后，实现了图片上传并插入到编辑器。但同时又自动往编辑器插入了一张base64的图片。导致编辑器中显示两张图片。

3.问题定位

分析源码，怀疑是readFiles方法中callback的执行导致了base64图片的插入。

4.解决方案

（1）将node_modules下quill-image-drop-module模块的index.js拷贝一份到项目的utils目录下，重命名为imageDrop.js。

    将88行的callback(evt.target.result);注释。如下： 

（2）修改页面的引用，改成从/utils/imageDrop.js引用ImageDrop 

// 图片拖拽上传
// import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
import { ImageDrop } from '@/utils/imageDrop.js'; // 拖动加载图片组件。
Quill.register('modules/imageDrop', ImageDrop)

    以上，问题解决。