在vue3中使用富文本编辑wangEditor上传自定义图片

富文本编辑器wangEditor的安装和使用我就不在这里做介绍了，大家可以去官网进行查看。
wangeditor官网：https://www.wangeditor.com/
接下来，进入主题，上传本地图片到后端，后端返回图片地址，在插入编辑器中

const editorConfig = reactive({
            MENU_CONF: {
                uploadImage: {
                // fieldName: 'file',
                // base64LimitSize: 10 * 1024 * 1024, // 10M 以下插入 base64
                // server: '/api/common/uploadFile', // 自定义的接口地址
                // headers: {
                //     'Content-Type': requestConfig.contentType,
                //     'Authorization': getToken()
                // },
                // 跨域是否传递 cookie ，默认为 false
                    withCredentials: true,

                    // 超时时间，默认为 10 秒
                    timeout: 30 * 1000, // 30 秒
                    async customUpload(file, insertFn) {
                        const form = new FormData()
                        form.append('file', file)
                        uploadImage(form).then(res => {
                            let url = previewConfig.routeFormat.replace('%t', getToken())
                            url = url.replace('%d', res.data.id)
                            url = url.replace('%t', (new Date()).getTime())
                            insertFn(url)    //将图片插入编辑器
                        })
                    }
                }
            }
        })

file 是 input 中选中的文件列表
insertFn是获取图片 url 后，插入到编辑器的方法
uploadImage 是方法名，接口

图片上传成功了
图片