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");
        });
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值