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内...
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请求会首先设定图片请求前缀,但这里图片返回地址后,并不会添加前缀···坑···,因此我这里给它写死了前缀,如下图:
阿弥陀佛,打完收工·····
更多推荐



所有评论(0)