umeditor及上传图片踩坑分享

背景：

        公司需要添加图文资料，于是开搞umeditor，因为新换的ng7框架，很多组件还不熟悉，在摸索中。

        开始一直显示不出来编辑器界面，通过一番百度，发现文章寥寥几篇，好在有一篇文章给到帮助，需要去ueditor官网下载文件并放入项目，照做之后，富文本编辑器可以正常加载并初步使用了。（开始一直以为npm引入就够用了，囧）

        可以用排版之后，就到第二个重点，上传图片了，因为以前配过ng1的umeditor，当时就各种资料不清晰搞的很费劲，两三天才搞定，后来没做笔记基本忘完了。

        上传图片第一件事就是修改图片上传url，改完之后，发现，官方默认的action事件，报400，跟成功的上传对比后发现是没有传入file参数，然后就去找解决方法。

        其中一篇文章说是修改上传方法，将action改为ajax上传，翻看源码发现拖动上传图片就是用的ajax，一番尝试后，终于上传成功。

操作内容

        注释submit事件

        创建xhr创建formdata    为formdata添加file 被上传文件（image.js：234行）

        将返回结果用json解析（这里看实际情况，主要是为了方便使用返回内容的参数）

        然后传入me.uploadComplete(res)

        去除uploadComplete里的eval方法

        uploadComplete成功的话触发Base.callback()

坑点

        callback里最外层的判断要改，默认判断state == ‘SUCCESS’

        这里是因为公司后端返回了我们公司的响应结构，没有按照ueditor想要的格式返回。

解决方法：

        1、把对应需要的值一个一个正确的给到。

        2、把拿到的response改成ueditor想要的格式再传给callback。

额外的小坑

        取上传图片时为了方便给input写了id，实际每次上传成功后是会销毁上次的input，导致id选择器在连续上传图片时被销毁而取不到文件。

解决方案：

        直接用jq找input：file的第一个，拿图片内容即可，无论传多少图片都行了。

参考资料：

        https://www.cnblogs.com/guofan/p/10065138.html

        https://www.cnblogs.com/tangchun/p/8796166.html

最终效果：