vue整合editormd上传图片解决跨域问题

背景描述:
最近在写一个前后端分离的项目,需要在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");
        });

你可能感兴趣的:(editormd,vue,vue.js,java,spring,spring,boot)