全网最直接简单。百度富文本跨域上传文件到文件服务器

看了很多文章其实也有很多办法，实现跨域上传。现在讲我目前所用的方法。只实现的多图上传。单图上传失败。

接下来必须认真的看完文章。

当前我用的版本为UEditor1.4.3。

这里主要是实现重写接收文件的action（controller）.

建议查看官方文档了解页面上请求时传的是那些参数（数据）以及返回格式

http://fex.baidu.com/ueditor/#dev-request_specification

了解差不多了。现在开始配置。

现有项目A，B. 其中，A为前端需要选择文件上的富文本框。B 项目为接受文件且返回数据。

首先 A ，B，项目必须引入百度富文本包

<dependency><groupId>cn.songxinqiang</groupId><artifactId>com.baidu.ueditor</artifactId><version>1.4.3</version></dependency>

第二步，A项目中下载百度富文本组件ueditor。B项目中在webapp 引入 ueditor富文本的 config.json 文件做用于配置返回正确的文件路径

第三步，在A项目中富文本组件的 ueditor.config.js 文件中的,

serverUrl: URL + "jsp/controller.jsp" 改为项目B的请求action 比如 serverUrl:"http://127.0.0.1:8080/fileserver/ueditorUpload.action" ,这样你发现。A项目的百度富文本只要有任何操作都会经过此链接。

第四步。只管写B项目中ueditorUpload()接受方法以及配置 config.json 里面的参数

项目B的框架中用到了struts2版本 2.3.37。所以action这样写

 private File upfile; // upfile 爲百度富文本圖片上傳對象/*** 百度富文本上傳url*/public void ueditorUpload() throws Exception{String json = null;request.setCharacterEncoding( "utf-8" );response.setHeader("Content-Type" , "text/html");response.setHeader("Access-Control-Allow-Methods", "*");//必須指定那個服務器上傳的ip或域名response.setHeader("Access-Control-Allow-Origin", "*");//支持跨域上傳response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");//        String rootPath = application.getRealPath( "/" );
//      String rootPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
//      String rootPath = getClasspath();String rootPath = request.getSession().getServletContext().getRealPath("")+File.separator;
System.out.println("-------------------请求参数--------------------");Enumeration paramNames = request.getParameterNames();while (paramNames.hasMoreElements()) {String name =(String) paramNames.nextElement();String value = request.getParameter(name);  System.out.println(name+"="+value);}Map<String, String> map = new HashMap<String, String>();String action_name = request.getParameter("action") ==null?"": request.getParameter("action");switch (action_name.trim().toLowerCase()) {case "uploadimage"://上傳圖片if(upfile!=null ) {String fileName = request.getParameter("name") ==null?"": request.getParameter("name");//判断非空if(!Handle.isNull(fileName)) {String suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length()).replace(".","");//后缀名if("jpeg".equals(suffix.toLowerCase()) || "jpg".equals(suffix.toLowerCase())|| "png".equals(suffix.toLowerCase()) || "gif".equals(suffix.toLowerCase())) {//获取要保存文件夹的物理路径(绝对路径)String path = "/uploadFiles/uploadImgs"+File.separator + new SimpleDateFormat("yyyyMMdd").format(new Date());String realPath = ServletActionContext.getServletContext().getRealPath(path);File files = new File(realPath);//测试此抽象路径名表示的文件或目录是否存在。若不存在，创建此抽象路径名指定的目录，包括所有必需但不存在的父目录。if(!files.exists()) {files.mkdirs();}try {String name  = UUID.randomUUID().toString().trim().replaceAll("-", "");//保存文件FileUtils.copyFile(upfile, new File(files,name+"."+suffix));if(!new File(realPath+File.separator+name+"."+suffix).exists()) {map.put("ErrorMsg", "上傳失敗，文件未上傳成功");}else {String basePath = path+File.separator+name+"."+suffix;map.put("url", basePath);map.put("state", "SUCCESS");map.put("title", name+"."+suffix);map.put("original", name+"."+suffix);//返回json 格式
//                              {
//                                  "state": "SUCCESS",
//                                  "url": "upload/demo.jpg",
//                                  "title": "demo.jpg",
//                                  "original": "demo.jpg"
//                              }json = JSONArray.fromObject(map).toString();json = json.substring(1,json.length()-1);}} catch (IOException e) {e.printStackTrace();}}else {json = new ActionEnter(request, rootPath).exec();}}else{json = new ActionEnter(request, rootPath).exec();}}else {json = new ActionEnter(request, rootPath).exec();}break;default:json = new ActionEnter(request, rootPath).exec();break;}
//      System.out.println("---"+json);PrintWriter out = null;response.setCharacterEncoding("utf-8");try {out = response.getWriter();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally {out.write(json);}
}public File getUpfile() {return upfile;}public void setUpfile(File upfile) {this.upfile = upfile;}

如果你是springmvc的方式上传可参考


@RequestMapping(value ="upload")
public String uploadImage(HttpServletRequest request,HttpServletResponse response)throws IllegalStateException, IOException{
response.setContentType("text/html;charset=UTF-8");request.setCharacterEncoding( "utf-8" );response.setHeader("Content-Type" , "text/html");response.setHeader("Access-Control-Allow-Methods", "*");//必須指定那個服務器上傳的ip或域名response.setHeader("Access-Control-Allow-Origin", "*");//支持跨域上傳response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");
// 转型为MultipartHttpRequest：
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
// 获得文件：
MultipartFile file = multipartRequest.getFile("upfile"); /***剩下的是你保存文件以及返回什么格式的json***/}

以上不知道改返回什么格式的请看文章开头的官方文档地址

最后配置B项目中的 config.json

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{/* 上传图片配置项 */"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 2048000, /* 上传大小限制，单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */"imageCompressEnable": true, /* 是否压缩图片,默认是true */"imageCompressBorder": 1600, /* 图片压缩最长边限制 */"imageInsertAlign": "none", /* 插入的图片浮动方式 */"imageUrlPrefix": "http://127.0.0.1:8080/fileserver", /*  图片访问路径前缀 */"imagePathFormat": "/uploadFiles/uplouploadImgsdImgs/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 *//* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 *//* {rand:6} 会替换成随机数,后面的数字是随机数的位数 *//* {time} 会替换成时间戳 *//* {yyyy} 会替换成四位年份 *//* {yy} 会替换成两位年份 *//* {mm} 会替换成两位月份 *//* {dd} 会替换成两位日期 *//* {hh} 会替换成两位小时 *//* {ii} 会替换成两位分钟 *//* {ss} 会替换成两位秒 *//* 非法字符 \ : * ? " < > | *//* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename *//* 涂鸦图片上传配置项 */"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */"scrawlFieldName": "upfile", /* 提交的图片表单名称 */"scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */"scrawlUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 图片访问路径前缀 */"scrawlInsertAlign": "none",/* 截图工具上传 */"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */"snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"snapscreenUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 图片访问路径前缀 */"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 *//* 抓取远程图片配置 */"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */"catcherFieldName": "source", /* 提交的图片列表表单名称 */"catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"catcherUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 图片访问路径前缀 */"catcherMaxSize": 2048000, /* 上传大小限制，单位B */"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 *//* 上传视频配置 */"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */"videoFieldName": "upfile", /* 提交的视频表单名称 */"videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"videoUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 视频访问路径前缀 */"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */"videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 *//* 上传文件配置 */"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */"fileFieldName": "upfile", /* 提交的文件表单名称 */"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"fileUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 文件访问路径前缀 */"fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */"fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp",".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"], /* 上传文件格式显示 *//* 列出指定目录下的图片 */"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */"imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */"imageManagerListSize": 20, /* 每次列出文件数量 */"imageManagerUrlPrefix": "", /* 图片访问路径前缀 */"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 *//* 列出指定目录下的文件 */"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */"fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */"fileManagerUrlPrefix": "", /* 文件访问路径前缀 */"fileManagerListSize": 20, /* 每次列出文件数量 */"fileManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp",".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"] /* 列出的文件类型 */}

其中 "imageActionName": "uploadimage", /* 执行上传图片的action名称 */

"imageUrlPrefix": "http://127.0.0.1:8080/fileserver", /* 图片访问路径前缀 */ 项目B的访问路径

到这里基本可以允许上传了。在A项目中使用多图上传

另外推荐另一大牛写的文章，总能找到你想要的

https://blog.csdn.net/zzq900503/article/details/77540331

全网最直接简单。百度富文本跨域上传文件到文件服务器相关推荐

php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白这个跨域异步上传功能我们借助了Jquery.for ...
百度富文本Ueditor图片上传趟坑之路
之所以写这片文章是自己在使用Ueditor当中,自己遇到的一些问题整理一下 1. 项目说明:使用Ueditor的项目是一个后台管理的项目,采用maven搭建的ssh框架另外添加了redis等组件,当中 ...
SWFUpload上传文件组件,跨域上传文件
转自: http://zhaowenbinmail.blog.163.com/blog/static/3908086201042743942935/ 解决SWFUpload上传文件组件使用时报告204 ...
springboot上传图片到宝塔Linux(本地上传和跨域上传)
1.浏览器访问宝塔面板的图片需要的配置-- 点击文件www-->server-->tomcat-->conf-->server.xml 可以自己修改,请在宝塔面板和服务器上放 ...
富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决问题原因我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
ASP.NET跨服务器上传文件的相关解决方案
ASP.NET跨服务器上传文件的相关解决方案参考文章: (1)ASP.NET跨服务器上传文件的相关解决方案 (2)https://www.cnblogs.com/zuowj/p/3999798.ht ...
java 跨域上传_java使用webuploader实现跨域上传详解
前言项目中使用webuploader进行文件上传,需要用到跨域,查看webuploader的issues发现是支持上传的,但是他们写的回复都是不清不白的,有点迷糊:想了半天才知道咋回事,也可能是我比 ...

全网最直接简单。百度富文本跨域上传文件到文件服务器

全网最直接简单。百度富文本跨域上传文件到文件服务器相关推荐

最新文章

热门文章