vue3 tinymce 富文本 粘贴图片实时发送请求到SpringBoot后端 并保存_富文本框后端如何保存

使用到的技术：
vue3 tinymce富文本 、SpringBoot 、nginx

最终实现效果：
tinymce富文本编辑器里面粘贴图片，上传到后端处理，然后保存到本地文件夹里面，并且利用nginx回显

vue3的tinymce富文本的使用：

参考下面这位老哥的文章：
链接: 在vue3.0项目中使用tinymce富文本编辑器 作者：mrjimin.

步骤一 修改images_upload_handler函数：

通过源代码

可以看到原作者把上传的图片转换为base64，并且把转换后的数据直接放到了 src标签里面

<img src="转换后的base64" alt="" width="250" height="250" /></p>
1

所以我们要做的是把这里改为上传图片到后端并且利用nginx把返回的数据URL放到这个src里面
原文：

        images_upload_handler: (blobInfo, success, failure) => {
   
          // 这里用base64的图片形式上传图片,
          let reader = new FileReader(); //本地预览
          reader.readAsDataURL(blobInfo.blob());
          reader.onloadend = function () {
   
            const imgbase64 = reader.result;
            success(imgbase64)
1
2
3
4
5
6
7
8