Vue用axios实现TinyMCE的图片上传功能

Vue用axios插件实现TinyMCE的图片上传功能

最近工作用到富文本编辑器，通过各种对比选择了TinyMCE编辑器。

在配置方面参考了这篇文章vue项目移植tinymce踩坑，
对原文作者表示感谢。

同时，因为项目中使用axios插件进行请求，为了统一格式，使用axios重新实现了TinyMCE自带的上传功能。

具体方式如下：

再次强调，如果不会再Vue中引入TinyMCE可以参考vue项目移植tinymce踩坑。

在上文配置的init方法中添加如下方法(就在上文中setup方法的后面):

  // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
 images_upload_handler: function (blobInfo, success, failure) {
   if (blobInfo.blob().size > self.maxSize) {
     failure('文件体积过大')
   }
   if (self.accept.indexOf(blobInfo.blob().type) >= 0) {
     uploadPic()
   } else {
     failure('图片格式错误')
   }
   function uploadPic () {
     let formData = new FormData()
     // 服务端接收文件的参数名，文件数据，文件名
     formData.append('upfile', blobInfo.blob(), blobInfo.filename())
     axios({
       method: 'POST',
       // 这里是你的上传地址
       url: 'uploadimage',
       data: formData,
     })
     .then((res) => {
       // 这里返回的是你图片的地址
       success(res.data.url)
     })
     .catch(() => {
       failure('上传失败')
     })
   }
 }

以上。

再次感谢上文作者vue项目移植tinymce踩坑。