tinymce 5.X 和 6.X 富文本编辑器如何实现上传图片

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

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

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

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

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

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

 

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

//6.x写法
        images_upload_handler(blobInfo, progress) {
            return new Promise((resolve, reject) => {
                const param = new FormData()
                param.append('file', blobInfo.blob(), blobInfo.filename())
                props
                    .fileUploadFunction(param)
                    .then((data) => {
                        return resolve(data)
                    })
                    .catch((err) => {
                        return reject('err:' + err)
                    })
            })
        },