背景描述:
最近在写一个前后端分离的项目,需要在vue整合一个富文本编辑器,因为以前用spring boot郑和国editormd,个人也喜欢editormd的样式,所以选择了它,从整合起就各种问题,拿不到html等,接下来详细谈一谈图片上传跨域问题
首先这个是使用官方默认的image-dialog.js,下方就是官方带来的错误,和大家一样的经历就是各种百度,就是查不出所以然来,明明数据已经返回到html中,就是拿不到,在image-dialog.js164行报错
下面是具体js里面的错
修改image-dialog.js中的提交方式,改成ajax提交就能解决问题,下面附代码
fileInput.bind("change", function() {
var fileName = fileInput.val();
var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/
if (fileName === "") {
alert(imageLang.uploadFileEmpty);
return false;
}
if (!isImage.test(fileName)) {
alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));
return false;
}
loading(true);
var submitHandler = function() {
var uploadIframe = document.getElementById(iframeName);
uploadIframe.onload = function() {
loading(false);
var formData = new FormData();
//获取需要上传的文件,追加到formData中以json的方式提交
formData.append("file", $("#file")[0].files[0]);
var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" :
"?") + "guid=" + guid;
$.ajax({
type: "post",
url: action,
data: formData,
dataType: "json",
async: false,
processData: false,
contentType: false,
success: function(data) {
//data返回来的数据
if (data.success == 1) {
//回显的url
dialog.find("[data-url]").val(data.data.url);
} else {
alert(data.msg)
}
},
});
return false;
};
};
dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
});