百度UEditor图片文件改变默认保存到项目根路径，自定义上传路径或远程服务器

如何使用百度UEditor，及为啥使用百度UEditor，本文不再陈述。请查阅官方文档-->UEditor文档 , 他们的文档比我的文笔比我好。

官方目录如下图展示：

本文主要内容是如何上传图片或者文件到自己定义的路径或者远程服务器，官方提供了自定义请求地址，如下图

上图右上红色框中黑色中的JS脚本为我们重点要增加的内容，但是在什么什么地方加上这段代码没有说，对于第一次使用脚本的同学可能会要走很多弯路，这段脚本需要放到你的初始实例化UEditor之后，我使用的是jsp版本的UEditor版，如下图：

解释一下，脚本中“ctx”是定义的上下文公共变量，可依据你的具体情况替代。

有了项目自己的上传工具方法，但是UEditor也不认识，需要与编辑器交互才可以建立起联系。那就是需要返回UEditor的json格式的字符串。

请参考官方文档3.3后端请求参数规范，例如uploadimage

请求参数: GET {"action":"uploadimage"}POST"upfile":File Data

返回格式:{ "state":"SUCCESS","url":"upload/demo.jpg","title":"demo.jpg","original":"demo.jpg"}

我使用的上传工具是SpringMVC的control，

@RequestMapping(value = "uploadUEditorImage")
public void uploadUEditorImage(@RequestParam(value = "upfile", required = false) MultipartFile file,
  HttpServletResponse response, HttpServletRequest request) throws Exception {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  JSONObject json=new JSONObject();
  PrintWriter out = response.getWriter();

logger.info("上传图片开始");
  try {

       .....上传图片具体方法参考省略，可以上传到tomcat虚拟路径或者别的服务器（流行的七牛等）

       json.put("state", "SUCCESS");
       json.put("title", file.getName());
       json.put("url",fileAndPicRootUrl+"/"+picRealFilePath+fileName);//修改为自己的图片保存路径
       json.put("original", file.getName());
       out.print(json.toString());
       logger.info("上传图片结束，位置："+path);
    } catch (Exception e) {
        json.put("state", "上传图片出错");
        out.print(json.toString());
         logger.error("上传图片出错",e);
  }

这样自定义上传图片到自定义上传路径或远程服务器就可以完美实现。

最后再提醒一下，如果是上传到tomcat虚拟路径需要在返回url中把地址写完全：如我的返回url: http://127.0.0.1:8080/staticfile/保存图片路径

tomcat虚拟路径配置为：增加 <Context docBase="E:/staticfilepath" path="/staticfile" reloadable="true" />

秒客网

百度UEditor图片文件改变默认保存到项目根路径，自定义上传路径或远程服务器

相关文章