記錄ueditor 前後端分離 跨域上傳圖片問題

1.如果多圖片上傳配置錯誤 看看是否添加了這個

response.setContentType("text/javascript");

裏面有的類需要到ueditor官網下載完整源碼。

package com.opg.pc.business.controller.common;

import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import com.opg.pc.business.baidu.ueditor.ActionEnter;
import com.opg.pc.business.baidu.ueditor.ResponseUtils;
import com.opg.pc.business.config.FileConfig;
import com.opg.pc.business.service.FileService;
import db.entity.FileInfo;
import io.swagger.annotations.Api;
import com.beust.jcommander.internal.Lists;
import java.io.PrintWriter;
import net.sf.json.JSONObject;

@RestController
@Api(description = "ueditor圖片上傳接口")
@RequestMapping("/ueditor")
public class UEditorController{
    
    @Autowired
	private FileService fileService;
    /**
     * ueditor文件上傳（上傳到外部服務器）
     * @param request
     * @param response
     * @param action
     */
    @ResponseBody
    @RequestMapping(value="/ueditorUpload", method={RequestMethod.GET, RequestMethod.POST})
    public void editorUpload(HttpServletRequest request, HttpServletResponse response, String action) {
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            if("config".equals(action)){    //如果是初始化
            	response.setContentType("text/javascript");
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = response.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            }else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){    //如果是上傳圖片、視頻、和其他文件
            	JSONObject obj = new JSONObject();
    			try {
    				for (MultipartFile file : getMultipartFileList(request)) {
    	
    					FileInfo fileInfo = fileService.uploadFile(file, null);
    	
    					obj.put("state", "SUCCESS");
    					obj.put("original", fileInfo.getFileOriginalName());
    					obj.put("size", file.getSize());
    					obj.put("title", fileInfo.getFileOriginalName());
    					obj.put("type", fileInfo.getFileType());
    					obj.put("url", fileInfo.getFilePath());
    					ResponseUtils.renderJson(response, obj.toString());
    				}
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    			
            }
        } catch (Exception e) {
        }
    }
    
    protected List<MultipartFile> getMultipartFileList(
			HttpServletRequest request) {
		List<MultipartFile> files = Lists.newArrayList();
		try {
			CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
					request.getSession().getServletContext());
			if (request instanceof MultipartHttpServletRequest) {
				// 將request變成多部分request
				MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
				Iterator<String> iter = multiRequest.getFileNames();
				// 檢查form中是否有enctype="multipart/form-data"
				if (multipartResolver.isMultipart(request) && iter.hasNext()) {
					// 獲取multiRequest 中所有的文件名
					while (iter.hasNext()) {
						// 適配名字重複的文件
						List<MultipartFile> fileRows = multiRequest
								.getFiles(iter.next().toString());
						if (fileRows != null && fileRows.size() != 0) {
							for (MultipartFile file : fileRows) {
								if (file != null && !file.isEmpty()) {
									files.add(file);
								}
							}
						}
					}
				}
			}
		} catch (Exception ex) {
			
		}
		return files;
	}
}

   

package com.opg.pc.business.baidu.ueditor;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
/**
 * HttpServletResponse幫助類
 */
public final class ResponseUtils {
	public static final Logger log = LoggerFactory.getLogger(ResponseUtils.class);
 
	/**
	 * 發送文本。使用UTF-8編碼。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            發送的字符串
	 */
	public static void renderText(HttpServletResponse response, String text) {
		render(response, "text/plain;charset=UTF-8", text);
	}
 
	/**
	 * 發送json。使用UTF-8編碼。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            發送的字符串
	 */
	public static void renderJson(HttpServletResponse response, String text) {
		render(response, "application/json;charset=UTF-8", text);
	}
 
	/**
	 * 發送xml。使用UTF-8編碼。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            發送的字符串
	 */
	public static void renderXml(HttpServletResponse response, String text) {
		render(response, "text/xml;charset=UTF-8", text);
	}
 
	/**
	 * 發送內容。使用UTF-8編碼。
	 * 
	 * @param response
	 * @param contentType
	 * @param text
	 */
	public static void render(HttpServletResponse response, String contentType,String text) {
		response.setContentType(contentType);
		response.setHeader("X-Frame-Options", "SAMEORIGIN");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		PrintWriter pWriter = null;
		try {
			pWriter = response.getWriter();
			pWriter.write(text);
			pWriter.flush();
		} catch (IOException e) {
			log.error(e.getMessage(), e);
		}finally{
			IOUtils.closeQuietly(pWriter);
		}
	}
}

2.單張圖片上傳，找了一個大神的方法

https://www.cnblogs.com/ocean-sky/p/7132319.html

需要修改源碼 ueditor.all.js 24503行的方法替換，源碼如下

/**
           * 2017-09-07 改掉了ueditor源碼，將本身的單文件上傳的方法改爲ajax上傳，主要目的是爲了解決跨域的問題
           * @author Guoqing
           */
          domUtils.on(input, 'change', function() {
              if(!input.value) return;
              var loadingId = 'loading_' + (+new Date()).toString(36);
              var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
              var allowFiles = me.getOpt('imageAllowFiles');

              me.focus();
              me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

              /!* 判斷後端配置是否沒有加載成功 *!/
              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 params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
              var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
              var formData = new FormData();
              formData.append("upfile", form[0].files[0] );
              $.ajax({
                url: action,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                  data = JSON.parse(data);
                  var link, loader,
                    body = (iframe.contentDocument || iframe.contentWindow.document).body,
                    result = body.innerText || body.textContent || '';
                  link = me.options.imageUrlPrefix + data.url;

                  if(data.state == 'SUCCESS' && data.url) {
                    loader = me.document.getElementById(loadingId);
                    loader.setAttribute('src', link);
                    loader.setAttribute('_src', link);
                    loader.setAttribute('title', data.title || '');
                    loader.setAttribute('alt', data.original || '');
                    loader.removeAttribute('id');
                    domUtils.removeClasses(loader, 'loadingclass');
                  } else {
                    showErrorLoader && showErrorLoader(data.state);
                  }
                  form.reset();
                }
              });
              function showErrorLoader(title){
                if(loadingId) {
                  var loader = me.document.getElementById(loadingId);
                  loader && domUtils.remove(loader);
                  me.fireEvent('showmessage', {
                    'id': loadingId,
                    'content': title,
                    'type': 'error',
                    'timeout': 4000
                  });
                }
              }
            });

參考代碼可以去我的下載看，csdn 默認5分

或者 https://github.com/songqiang1/ueditorDemo