百度Ueditor传图

关于UEditor如何自定义按钮，此文就不说了，可以参考
Ueditor 自定义按钮
这里写链接内容
UEditor添加一个普通按钮
我重点要说一下在编辑器中插图片。在ueditor.all.js中添加如下代码：

UE.commands['camnpr'] = {
        execCommand : function(){
            var me = this;
            var range;
            var inputObj=document.createElement('input');
            inputObj.setAttribute('id','upimg');
            inputObj.setAttribute('type','file');
            inputObj.setAttribute("accept","image/*");
            inputObj.setAttribute("name","single");
            inputObj.setAttribute("style",'width:20px;height:20px;position:absolute;right:330px;opacity: 0; filter:Alpha(opacity=0)');
            var form = document.createElement('form');
            form.setAttribute('enctype','multipart/form-data');
            form.setAttribute('id','editorForm');
            form.appendChild(inputObj);
            $("#edui2").append(form);
            inputObj.click();
            $(inputObj).change(function(){
                var file = document.getElementById('upimg').files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var url = this.result;
                    var name = file.name;
                    var img = document.createElement('img');
                    img.setAttribute("style","background:'#e6e6e6';display:block;max-height:200px;");
                    img.setAttribute("src","");
                    $.ajax({
                        type: "post",
                        url: //i won't tell u the url,
                        data: new FormData(form),
                        enctype: 'multipart/form-data',
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        cache: false,
                        success: function(e) {
                            img.setAttribute("src",e.data);
                        }
                    });
                    range = me.selection.getRange();
                    range.insertNode(img);
                    range.collapse();
                }
            });
        }
    };

然后就可以传图了。。。
啰嗦一句：编辑器里面的内容传给后端，我之前还用jq去选啊选，选个半死，直到我发现它：
http://fex.baidu.com/ueditor/#api-common，还是去看文档啦

试试下vuejs的：

<div class="pic">
                <form enctype="multipart/form-data" id="upPicForm">
                    <div class="picarea">
                        <span>+</span>
                        <div id="preview" class="preview" enctype="multipart/form-data"></div>
                        <input id="imgInput" type="file" name="single" class="input-file" @change="changePic()" accept="image/*"/>
                    </div>
                </form>
            </div>

changePic(){
            let self = this;
                self.pic = document.getElementById("imgInput").files[0];
                var reader = new FileReader();
                reader.readAsDataURL(self.pic);
                reader.onload = function(e) {
                    let urlData = this.result;
                    document.getElementById("preview").innerHTML = "< img src='" + urlData + "' />";
                    //图片传入服务器获取src
                    var formData = new FormData(document.getElementById("upPicForm"));
                    $.ajax({
                        type: "post",
                        url: self.url+"/photo/upload",
                        data: formData,
                        enctype: 'multipart/form-data',
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        cache: false,
                        success: function(e) {
                            self.imgSrc = e.imgName;
                        }
                    });

                };
        }