UEditor编辑器上传图片开发流程
在ueditor目录下找到uedior.config.js,找到如下三行:
,imageUrl: "<%=path %>/controller.json" //图片上传提交后台对应的地址,路径固定为*/controller.* ,imagePath: "<%=path %>/ueditor/" //图片在服务器上的存储目录 ,imageFieldName: "upload" //后台对应接收image的参数名
或者:
var ueditor = UE.getEditor('myEditor',{ imageUrl: "<%=path %>/servlet/UploadServlet", //图片上传提交后台对应的地址 imagePath: "<%=path %>/ueditor/", //图片在服务器上的存储目录 imageFieldName: "upload" //后台对应接收image的参数名 });
注意:记得在uedior.config.js配置文件中把"serverUrl"注释掉
在/ueditor/_src/plugins/simpleupload.js文件中,把link = me.options.imageUrlPrefix + json.url; 改为link = getRootPath()+json.url;
最后配置服务器返回的数据格式,这需要这服务器端进行修改。对应于后台接收上传图片的那个controller,返回的格式需如下:
{'url':'60391393848223.jpg','title':'p1999637039.jpg','original':'p1999637039.jpg','state':'SUCCESS'}
注意:url用相对路径,这样就OK了。
//js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.href; //获取主机地址之后的目录,如: uimcardprj/share/meun.jsp var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); //获取主机地址,如: http://localhost:8083 var localhostPaht=curWwwPath.substring(0,pos); //获取带"/"的项目名,如:/uimcardprj var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); //return localhostPaht + projectName; return localhostPaht+"/"; }
分类:
jQuery
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」