这篇学习tinymce中的img图片的上传。tinymce工具中有个功能是插件/上传图片。这里上传图片需要自定义上传的方法接口等，官网上也有说明具体怎么上传，也学习到了。

一：上传图片

tinymce中在初始化的时候有这样一个属性，是上传图片的，这个上传图片是用于工具栏中插入/图片这里的

中文官网上有说怎么处理图片上传的案例

要使TinyMCE能够上传图片，需要如下几步：

第1步：上传图片，首先要启用图片插件

在plugins参数中把image加进去。

第2步：在工具栏显示图片工具按钮

在toolbar参数中把image加进去。

此时，点图片按钮是没有上传选项的，只能添加图片地址。

第3步：加入配置参数images_upload_url

此参数用于指定一个接受上传文件的后端处理程序地址，例如：

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

最后如下方示例：

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
有关图片上传的参数
选项名称
说明
images_upload_url
指定上传图片的后端处理程序的URL。
images_upload_base_path
给返回的相对路径指定它所相对的基本路径。
images_upload_credentials
对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。
images_upload_handler
此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。
二：优化上传方法
官网发给的代码学习了之后发现好像上传图片使用的方式基本都是差不多的，然后结合实际后端需要前端的入参数类型等进行了优化，优化代码如下。
images_upload_handler: (blobInfo, success, failure) => {
  let formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());
  imgUpload(formData)//图片上传接口
    .then((res) => {
      console.log(res)
      if (res.rspResult.bizCode === 200) {
        success(res.data.url);
      } else {
        failure(res.rspResult.message);
    .catch((err) => {
      this.$message.error('System error+++++++++++++');
当时写这里的时候也是看着官方的文档自己摸索写的，后续继续学习后，会将这一块能优化的都优化一下。