解决editor.md+SpringBoot前后端分离上传图片到阿里云OOS跨域等问题

最终代码:
在这里插入图片描述

一、分析遇到的问题:

在上传图片的时候会显示跨域的问题
在这里插入图片描述

后端也配置了跨域的问题

@RestController
@RequestMapping("/rest/agriculture/productController")
@Api("商品管理")
@CrossOrigin
public class ProductController 

在这里插入图片描述

很明显不是后端的问题,其他的图片都可以进行上传,如下,唯独使用editor.md无法进行上传。在这里插入图片描述

二、解决问题

js配置如下:

//初始化Markdown的编辑区
var testEditor = editormd({
   id      : "test-editormd",
   width   : "100%",
   height  : 640,
   syncScrolling : "single",
   path    : "res/editormd/lib/",
   placeholder : "请填写商品的详细描述信息",
   emoji:true,

   /**上传图片相关配置如下*/
   imageUpload       : true
   ,imageFormats      : ["jpg", "jpeg", "gif", "png", "bmp", "webp"]
   ,saveHTMLToTextarea: true//注意:这个配置,方便post提交表单
   ,crossDomainUpload : true
   ,imageUploadURL    : ServerIP+"/rest/agriculture/productController/addProductImage"//上传图片的的地址

});

关键代码:

   /**上传图片相关配置如下*/
   imageUpload       : true
   ,imageFormats      : ["jpg", "jpeg", "gif", "png", "bmp", "webp"]
   ,saveHTMLToTextarea: true//注意:这个配置,方便post提交表单
   ,crossDomainUpload : true
   ,imageUploadURL    : ServerIP+"/rest/agriculture/productController/addProductImage"//上传图片的的地址

后端代码:

String homeDisplayDrawingImageUrl = ossUtil.checkImage(attach); 此代码只是我封装的上传倒阿里云OOS的一个工具类。可以忽略,你可以保存到自己的本地。如果你想保存到本地的话,可以参考我附加的文章地址,查看即可解决。

  /**
     * 上传商品简介内容中的插入的单张图
     * @param attach
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/addProductImage", method = RequestMethod.POST)
    @ApiOperation("上传商品简介内容中的插入的单张图")
    public String addProductImage(@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach) {

        JSONObject jsonObject=new JSONObject();

        //上传商品简介内容中的,单张图 
        String homeDisplayDrawingImageUrl = ossUtil.checkImage(attach); 


        try {
            // 下面response返回的json格式是editor.md所限制的,规范输出就OK
            jsonObject.put("success", 1);
            jsonObject.put("message", "上传成功");
            jsonObject.put("url", homeDisplayDrawingImageUrl);
        } catch (Exception e) {
            jsonObject.put("success", 0);
        }

        System.out.println(jsonObject.toString());
        return jsonObject.toString();
    }

至于传值为什么要这样写:editormd-image-file

@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach

可以打开前端,使用控制台看一下这个的name,就是这个;如果想改的话,就去改源代码了。
在这里插入图片描述

在这里插入图片描述

解决问题的重要代码:
需要找到admin/res/editormd/plugins/image-dialog/image-dialog.js 这个js文件,因为要修改这的源代码,可以根据自己项目的路径参考我的地址来找到。

原来的代码:

var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
     "<label>" + imageLang.url + "</label>" +
     "<input type=\"text\" data-url />" + (function(){
         return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
                                             "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/!*\" />" +
                                             "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
                                         "</div>" : "";
     })() +
     "<br/>" +
     "<label>" + imageLang.alt + "</label>" +
     "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
     "<br/>" +
     "<label>" + imageLang.link + "</label>" +
     "<input type=\"text\" value=\"http://\" data-link />" +
     "<br/>" +
 ( (settings.imageUpload) ? "</form>" : "</div>");

修改成:

var dialogContent = ( (settings.imageUpload) ? "<form action=\"#\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
 ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
 "<label>" + imageLang.url + "</label>" +
 "<input type=\"text\" data-url />" + (function(){
     return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
         "<input type=\"file\" name=\"" + classPrefix + "image-file\" id=\"" + classPrefix + "image-file\" accept=\"image/!*\" />" +
         "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
         "</div>" : "";
 })() +
 "<br/>" +
 "<label>" + imageLang.alt + "</label>" +
 "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
 "<br/>" +
 "<label>" + imageLang.link + "</label>" +
 "<input type=\"text\" value=\"http://\" data-link />" +
 "<br/>" +
 ( (settings.imageUpload) ? "</form>" : "</div>");

原来的:

 uploadIframe.onload = function() {

   loading(false);

    var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
    var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);

    json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");

    console.log(json);

    if(!settings.crossDomainUpload)
    {
      if (json.success === 1)
      {
          dialog.find("[data-url]").val(json.url);
      }
      else
      {
          alert(json.message);
      }
    }

    return false;

};

修改成:

 uploadIframe.onload = function() {
      loading(false);
       //这是我个人写法
      var formData = new FormData();
       formData.append("editormd-image-file",$("#editormd-image-file")[0].files[0]);
       var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
       console.log(formData);

       $.ajax({
           type:"post",
           url:action,
           data:formData,
           dataType:"json",
           async:false,
           processData : false, // 使数据不做处理
           contentType : false, // 不要设置Content-Type请求头
           success:function(data){
               // 成功拿到结果放到这个函数 data就是拿到的结果
               console.log(data);
               if(data.success == 1){
                   console.log(data.message);
                   dialog.find("[data-url]").val(data.url);
               }else{
                   alert(data.message);
               }
           },
       });

       return false;
};

全部js文件代码:

/*!
 * Image (upload) dialog plugin for Editor.md
 *
 * @file        image-dialog.js
 * @author      pandao
 * @version     1.3.4
 * @updateTime  2015-06-09
 * {@link       https://github.com/pandao/editor.md}
 * @license     MIT
 */

(function() {

    var factory = function (exports) {

		var pluginName   = "image-dialog";

		exports.fn.imageDialog = function() {

            var _this       = this;
            var cm          = this.cm;
            var lang        = this.lang;
            var editor      = this.editor;
            var settings    = this.settings;
            var cursor      = cm.getCursor();
            var selection   = cm.getSelection();
            var imageLang   = lang.dialog.image;
            var classPrefix = this.classPrefix;
            var iframeName  = classPrefix + "image-iframe";
			var dialogName  = classPrefix + pluginName, dialog;

			cm.focus();

            var loading = function(show) {
                var _loading = dialog.find("." + classPrefix + "dialog-mask");
                _loading[(show) ? "show" : "hide"]();
            };

            if (editor.find("." + dialogName).length < 1)
            {
                var guid   = (new Date).getTime();
                var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;

                if (settings.crossDomainUpload)
                {
                    action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
                }

              /*  var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
                                        ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
                                        "<label>" + imageLang.url + "</label>" +
                                        "<input type=\"text\" data-url />" + (function(){
                                            return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
                                                                                "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/!*\" />" +
                                                                                "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
                                                                            "</div>" : "";
                                        })() +
                                        "<br/>" +
                                        "<label>" + imageLang.alt + "</label>" +
                                        "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
                                        "<br/>" +
                                        "<label>" + imageLang.link + "</label>" +
                                        "<input type=\"text\" value=\"http://\" data-link />" +
                                        "<br/>" +
                                    ( (settings.imageUpload) ? "</form>" : "</div>");*/
                //这是我个人写法
                var dialogContent = ( (settings.imageUpload) ? "<form action=\"#\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
                    ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
                    "<label>" + imageLang.url + "</label>" +
                    "<input type=\"text\" data-url />" + (function(){
                        return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
                            "<input type=\"file\" name=\"" + classPrefix + "image-file\" id=\"" + classPrefix + "image-file\" accept=\"image/!*\" />" +
                            "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
                            "</div>" : "";
                    })() +
                    "<br/>" +
                    "<label>" + imageLang.alt + "</label>" +
                    "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
                    "<br/>" +
                    "<label>" + imageLang.link + "</label>" +
                    "<input type=\"text\" value=\"http://\" data-link />" +
                    "<br/>" +
                    ( (settings.imageUpload) ? "</form>" : "</div>");



				//这个是作者注释掉的,不知道干啥的 忽略即可
                //var imageFooterHTML = "<button class=\"" + classPrefix + "btn " + classPrefix + "image-manager-btn\" style=\"float:left;\">" + imageLang.managerButton + "</button>";

                dialog = this.createDialog({
                    title      : imageLang.title,
                    width      : (settings.imageUpload) ? 465 : 380,
                    height     : 254,
                    name       : dialogName,
                    content    : dialogContent,
                    mask       : settings.dialogShowMask,
                    drag       : settings.dialogDraggable,
                    lockScreen : settings.dialogLockScreen,
                    maskStyle  : {
                        opacity         : settings.dialogMaskOpacity,
                        backgroundColor : settings.dialogMaskBgColor
                    },
                    buttons : {
                        enter : [lang.buttons.enter, function() {
                            var url  = this.find("[data-url]").val();
                            var alt  = this.find("[data-alt]").val();
                            var link = this.find("[data-link]").val();

                            if (url === "")
                            {
                                alert(imageLang.imageURLEmpty);
                                return false;
                            }

							var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";

                            if (link === "" || link === "http://")
                            {
                                cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
                            }
                            else
                            {
                                cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
                            }

                            if (alt === "") {
                                cm.setCursor(cursor.line, cursor.ch + 2);
                            }

                            this.hide().lockScreen(false).hideMask();

                            //删除对话框
                            this.remove();

                            return false;
                        }],

                        cancel : [lang.buttons.cancel, function() {
                            this.hide().lockScreen(false).hideMask();

                            //删除对话框
                            this.remove();
                            
                            return false;
                        }]
                    }
                });

                dialog.attr("id", classPrefix + "image-dialog-" + guid);

				if (!settings.imageUpload) {
                    return ;
                }

				var fileInput  = dialog.find("[name=\"" + classPrefix + "image-file\"]");

				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 body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
                            var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);

                            json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");

                            console.log(json);

                            if(!settings.crossDomainUpload)
                            {
                              if (json.success === 1)
                              {
                                  dialog.find("[data-url]").val(json.url);
                              }
                              else
                              {
                                  alert(json.message);
                              }
                            }

                            return false;*/

                                //这是我个人写法
                               var formData = new FormData();
                                formData.append("editormd-image-file",$("#editormd-image-file")[0].files[0]);
                                var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
                                console.log(formData);

                                $.ajax({
                                    type:"post",
                                    url:action,
                                    data:formData,
                                    dataType:"json",
                                    async:false,
                                    processData : false, // 使数据不做处理
                                    contentType : false, // 不要设置Content-Type请求头
                                    success:function(data){
                                        // 成功拿到结果放到这个函数 data就是拿到的结果
                                        console.log(data);
                                        if(data.success == 1){
                                            console.log(data.message);
                                            dialog.find("[data-url]").val(data.url);
                                        }else{
                                            alert(data.message);
                                        }
                                    },
                                });

                                return false;
                        };


                    };

                    dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");


				});
            }

			dialog = editor.find("." + dialogName);
			dialog.find("[type=\"text\"]").val("");
			dialog.find("[type=\"file\"]").val("");
			dialog.find("[data-link]").val("http://");

			this.dialogShowMask(dialog);
			this.dialogLockScreen();
			dialog.show();

		};

	};

	// CommonJS/Node.js
	if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
    {
        module.exports = factory;
    }
	else if (typeof define === "function")  // AMD/CMD/Sea.js
    {
		if (define.amd) { // for Require.js

			define(["editormd"], function(editormd) {
                factory(editormd);
            });

		} else { // for Sea.js
			define(function(require) {
                var editormd = require("./../../editormd");
                factory(editormd);
            });
		}
	}
	else
	{
        factory(window.editormd);
	}

})();

三、效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

可参考地址:
https://blog.csdn.net/ELOVINFG/article/details/103048813
https://www.cnblogs.com/softidea/p/7808214.html

四、快看,小郑有话对你说

如果对你有帮助,可以分享给你身边的朋友。或者给俺点个大大的赞和大大的评论,点赞和评论就是给我最大的支持,感谢。
水平有限,难免会有疏漏或者书写不合理的地方,欢迎交流讨论。
作者:TrueDei
作者唯一博客CSDN:https://truedei.blog.csdn.net/
转载说明:如需转载请注明原地址和作者名。

如果喜欢我的文章,还没看够可以关注我,我会用心写好每一篇文章。

手撕代码八百里 CSDN认证博客专家 Linux 分布式 Java
原名:TrueDei,现:手撕代码八百里

不荒废现在,不畏惧未来!我认为把知识给别人讲会,讲明白,自己才彻底明白。努力把文章写好,写明白每一篇文章,分享给更多人。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值