vue使用ueditor请求携带token

ueditor的init请求（请求config）以及simpleupload，图片上传请求携带token解决方法：

首先使用npm i vue-ueditor-wrap -S，
在引用页面直接 import VueUeditorWrap from 'vue-ueditor-wrap’即可。
然后将ueditor官网下载的静态资源 放入vue项目的public下，并新建static/UEditor内。
因为使用的vue-ued-wrap，它会直接调用静态资源里的ueditor.all.min.js文件，但这个文件被压缩过了，修改非常麻烦···（本人亲测···），所以我将这个文件直接删掉，并将ueditor.all.js文件改名为ueditor.all.min.js，方便我们修改代码。

1，config请求

上图为我修改后的代码。

if (method == "POST") {
     
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(submitStr);
        } else {
     
            var list = window.document.cookie.split(";")
            let filterList = list.filter(item =>{
     
                return item.substring(1,12) === "admin-token";
            })
            var token = filterList[0].substr(13);
            xhr.setRequestHeader("Authorization", token);
            xhr.send(null);
        }

我将token放在cookies中，使用 window.document.cookie获取token，但此时获取的cookies为字符串，想使用JSON.parse将其转化成对象，but失败，所以使用了一个比较笨的方法，然后“admin-token”是我放入cookies中的token的标识。
这样config请求带有了token。

2，多图上传功能

这个非常简单，找到

这个image.js文件
然后修改代码如下：

上图为修改后的代码

uploader.on('uploadBeforeSend', function (file, data, header) {
     
                //这里可以通过data对象添加POST参数
                header['X_Requested_With'] = 'XMLHttpRequest';
                var list = window.document.cookie.split(";")
                let filterList = list.filter(item => {
     
                    return item.substring(1, 12) === "admin-token";
                })
                var token = filterList[0].substr(13);
                header['Authorization'] = token;
            });

即可添加token。

3，simpleupload图片上传功能

这个请求是最麻烦的一个···
让我们返回ueditor.all.min.js（原ueditor.all.js）文件

修改的代码过长，上面截图仅是一部分，全部代码如下：

/* 判断后端配置是否没有加载成功 */
                if (!me.getOpt('imageActionName')) {
     
                    errorHandler(me.getLang('autoupload.errorLoadConfig'));
                    return;
                }
                // 判断文件格式是否错误
                var filename = input.value,
                    fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
                if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
     
                    showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                    return;
                }
                // var formdata = new FormData()
                // formdata.append("upfile",input.files[0])
                // console.log("22222",input.files[0])
                // domUtils.on(iframe, 'load', callback);
                // form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params+'&encode=utf-8');
                // console.log(form)
                // form.submit();
                var fileForm = new FormData();
                fileForm.append("upfile",input.files[0]);
 
                var oReq = new XMLHttpRequest();
                oReq.open("POST",imageActionUrl,true);
                var list = window.document.cookie.split(";")
                let filterList = list.filter(item =>{
     
                    return item.substring(1,12) === "admin-token";
                })
                var token = filterList[0].substr(13);
                oReq.setRequestHeader("Authorization", token);
                oReq.send(fileForm);   // 使用XMLHttpRequest的send()把数据发送出去
 
                oReq.onreadystatechange = function(responseText) {
     //服务器返回值的处理函数，此处使用匿名函数进行实现 
                    if (oReq.readyState == 4 && oReq.status == 200) {
     // 
                        var responseData = eval("("+oReq.responseText+")");
                        callback(responseData);
                    } 
                }; 

原来的代码使用form提交，我死活加不上headers（加上headers即可添加token属性），所以我就半路截胡，直接获取input里的file，使用XMLHttpRequest提交。
这种图片上传的方式还有个坑···，config请求会首先设定图片请求前缀，但这里图片返回地址后，并不会添加前缀···坑···，因此我这里给它写死了前缀，如下图：

阿弥陀佛，打完收工·····