tinymce图片的自定义上传和自定义img的url路径

 介绍：

        在tinymce官方文档中，实现自定义图片上传可以使用images_upload_handler属性代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。

         

 代码：

        使用images_upload_handler属性：

        在配置中写入images_upload_handler属性，该属性在上传图片时运行自定义的方法，写入上传图片的请求，传入blobInfo.blob(), blobInfo.filename()，通过form表单的方式提交数据。

images_upload_handler: async function (blobInfo, success, failure) {
    var form = new FormData();
    form.append('file', blobInfo.blob(), blobInfo.filename());
    // blobInfo.blob()：包含了图片相关信息
    // upload为自己封装的上传图片接口。
    let {data} = await upload(form);
                    
    console.log(data);
    // data里返回了url图片地址
}

我在控制台中打印了一下blobInfo的信息。

拿到data里url的图片地址后，再通过success()成功的回调中传入img的url地址

// 上传成功后，调用success函数传入图片地址
// 因为我的上传接口返回的url不是完整的路径，需要一个基地址，如果是完整的路径，直接写入完整的路径即可
success("图片基地址" + data.url);

然后就实现了自定义上传图片和自定义img的url路径

 

这样 传入的图片数据就不是base64格式了

 

完整代码：

        

images_upload_handler: async function (blobInfo, success, failure) {
   var form = new FormData();
   form.append('file', blobInfo.blob(), blobInfo.filename());
   // blobInfo.blob()：包含了图片相关信息
   let {data} = await upload(form);
                    
   console.log(data);
   // 上传成功后，调用success函数传入图片地址
   success("图片基地址" + data.url);
}