使用VueQuill自带拓展模块，将图片上传到服务器

quill-image-uploader

作为vue3.0少数能用的富文本编辑器vueQuill，相关的教程实在是太少了。
今天我翻了半天，终于找到了vueQuill官方自带的图片上传拓展模块。
这是官方github文档：
https://github.com/NoelOConnell/quill-image-uploader

安装

使用 npm 安装：

npm install quill-image-uploader --save

我个人是使用的vue3 setup语法糖编写的页面。
这是网页标签

      <QuillEditor
                                ref="myTextEditor"
                                contentType="html"
                                :options="editorOption"
                            />

import {Quill, QuillEditor} from '@vueup/vue-quill';
import ImageUploader from "quill-image-uploader";
Quill.register("modules/imageUploader", ImageUploader);
    const editorOption = {
    modules: {
        toolbar: {...},
        imageUploader: {
            upload: (file) => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve(
                         "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
                        );
                    }, 3500);
                });
            }
        },
    },
};

官方给的示例图片链接有问题，打不开，可以自行替换为有效的图片链接查看效果。
完成了以上操作，点击图片上传按钮，就会返回一个包含以上链接的图片在富文本编辑器中，而不是像以前那样直接将base64格式上传到编辑器里。
至于怎么将图片上传到服务器，替换setTimeout这个方法为正常的上传图片方法就行了。