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踩坑

发布了88 篇原创文章 · 获赞 150 · 访问量 56万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览