烟雨落轻尘

主题

TinyMce5.x实现上传图片到cos 迁移 ​

前言 ​

tinymce应该是最优秀的几款富文本编辑器之一,他的功能十分完善，集成起来也是十分便捷

在我们写文章的过程中，肯定少不了图片上传，那么我们来试试实现一下tinymce的图片上传

文档地址 ​

TinyMce官网 TinyMce中文文档中文手册（推荐）

我的环境是vue3.x nodejs typescript,如果你还未集成TinyMCE,可以看看我的上一篇文章 Vue3集成TinyMce5.x

我们先瞧瞧图片上传的文档 上传图片和文件 | TinyMce中文文档中文手册

图片上传参数 ​

选项名称说明
images_upload_url指定上传图片的后端处理程序的URL。
images_upload_base_path给返回的相对路径指定它所相对的基本路径。
images_upload_credentials对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。
images_upload_handler此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。

为了使我们对图片上传的可控性更高，我们可以选择实现 images_upload_handler 这个回调钩子来做上传

提供的例子 ​

javascript
tinymce.init({
    selector: '#tinydemo',
    plugins: 'image',//使用图片功能必须添加
    toolbar: 'image',//使用图片功能必须添加
    images_upload_handler: function (blobInfo, succFun, failFun) {
        var xhr, formData;
        var file = blobInfo.blob();//转化为易于理解的file对象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/demo/upimg.php');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failFun('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failFun('Invalid JSON: ' + xhr.responseText);
                return;
            }
            succFun(json.location);
        };
        formData = new FormData();
        formData.append('file', file, file.name );//此处与源文档不一样
        xhr.send(formData);
    }
});

我们简单的改造一下images_upload_handler 我的前端请求使用的是axios

typescript
plugins: 'image',//使用图片功能必须添加
toolbar: 'image',//使用图片功能必须添加
images_upload_handler: (blobInfo: BlobInfo, succFun: Function, failFun: Function) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob())
    //上传文件到cos
    uploadTinyMceFile(formData).then((res) => {
        //在succFun回调传入完整的访问地址 自行把握
        succFun(cdnUrl + res.data.data)
    }).catch((error) => {
        failFun(error)
    })
},
//上传方法 service是对axios的封装处理的实例
export function uploadTinyMceFile(formData: FormData) {
    return service.post("/blog/article/uploadTinymce", formData);
}

service定义地址

如果你的后端是jfinal可以查看 Jfinal上传文件到腾讯云cos