2021-01-25

tinymce富文本编辑器如何实现上传图片

在项目中，前端会经常使用tinymce富文本编辑器插件，编辑器有上传图片的功能，而对于上传的这个图片的处理，有两种方式：

编辑器中有一个images_upload_handler方法，上传图片会触发该事件，该事件有3个参数，分别是上传图片的文件内容、上传成功的success处理方法、上传失败的failure处理方法。

方式一：上传图片时将文件流给后端，后端返回附件地址

 1 images_upload_handler: (blobInfo, success, failure) => {
 2           let fd = new FormData();
 3           fd.append("file", blobInfo.blob());
 4           // 调接口，上传图片
 5           api.uploadImg(fd).then(response => {
 6 　　　// 后端接口返回上传图片的访问地址
 7              let result = `${location.origin}/${response}`
 8 　　　// 编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
 9           　success(result)
10           })
11         }

方式二：上传图片时前端读取文件，转为base64格式，放在img的src中，不需要通过后端

1 images_upload_handler: (blobInfo, success, failure) => {
2           let base64 = "data:image/png;base64," + blobInfo.base64();
3 　　　//编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
4           success(base64);
5   }

原文链接：https://www.cnblogs.com/grow-up-up/p/13390145.html