ssm下使用ueditor(jsp版本)编辑器自定义路径上传图片到公司服务器。(之前写的被误删了)

来源:互联网 发布:xtream path mac 编辑:程序博客网 时间:2024/05/21 07:12

最近公司需要使用ueditor上传图片,写了一个星期,现在记录一下。

1.官网下载ueditor ,地址:http://ueditor.baidu.com/website/download.html

2.下载之后将ueditor.jsp-jsp-lib下的jar包添加到maven中。在pom.xml中,如:

<dependency>  
    <groupId>com.baidu</groupId>  
    <artifactId>ueditor</artifactId>  
    <version>1.1.2</version>  
</dependency>

3.

4.如上图 :删除图标在ueditor.config.js---toolbars标签自定义图标,不需要的就直接删除就行。

5.因为是自定义路径,ueditor中的所有配置文件不需要修改,在你需要使用ueditor编辑器的页面加入:

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

//下面的代码是用来获取你在config.json中配置的 "imageActionName": "uploadimage"(官网配置没有改过), 将你配置的action替换成你需要访问的controller方法。

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
//alert(UE.Editor.prototype.getActionUrl+"====");
UE.Editor.prototype.getActionUrl = function(action) {
//alert(action+"---");
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
    //alert(action+"--==--");
        return 'http://localhost:9000/bicb/web/knowledge/knowPublish/saveImg';
    } else if (action == 'uploadvideo') {
        return 'http://localhost:9000/bicb/web/knowledge/knowPublish/savevideo';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

6.上面的代码很好理解,实在不行  你可以alert一下,一看就能明白

7.开始写controller中的方法。其实我们点击上传图片之后,我们可以看到请求发到自定义controller之后附加的几个东西,其中name="upfile"这个就是我们要上传的图片


官方文档可以查看后端的请求官方 如下:


8.现在目标就很明确了,只要能拼接好json串就可以了。

//图片上传
@RequestMapping(value="saveImg", produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map<String,Object> save(@RequestParam (value = "upfile", required = false) MultipartFile files, HttpServletRequest request,HttpServletResponse response){
Map<String,Object> map = new HashMap<String, Object>();

String realName = null;  
   knowFileVO
 VO = new knowFileVO();

            String uuidName = null;  
   
    String realPath = null;
   
   String roolPath = null;
   
   try{
    long size = files.getSize();

realName = files.getOriginalFilename();
//防止重名
   uuidName = this.getUUIDFileName(files.getOriginalFilename());
   
   //拿到本地路径
   String staticPath = ResourcesUtil.getProperties("staticPath");
   //图片保存项目路径
   File directory = new File(staticPath);// 参数为空
   if(!directory.exists() && !directory.isDirectory()) {
   directory.mkdir();
   }
   realPath = directory.getCanonicalPath();
   System.out.println(realPath);  
   真实路径  
   roolPath = request.getSession().getServletContext().getRealPath("/"); 
   得到文件的输入流  
        InputStream in = new BufferedInputStream(files.getInputStream());  
        //获得文件的输出流  
        OutputStream out = new BufferedOutputStream(new FileOutputStream(new File(realPath,uuidName)));
        IOUtils.copy(in, out);
        in.close();  
        out.close();  

//保存 know_file
int falg = saveKnowFileImge(VO);
        if(flag!=0){  
            map.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容  
            //map.put("url","http://localhost:9000/bicb/webapp/upload/"+uuidName);         //能访问到你现在图片的路径  
            //System.out.println(efilePath);
            map.put("url", viewPath);
            map.put("title","");  
            map.put("original",realName );           
           }  
       } catch (ServiceException e) {  
      map.put("state", "文件上传失败!"); //在此处写上错误提示信息,这样当错误的时候就会显示此信息  
           map.put("url","");  
           map.put("title", "");  
           map.put("original", "");          
           e.printStackTrace();  
       }   
        return map;
}

}

//防止重名

 private String getExtName(String s, char split) {    
          int i = s.lastIndexOf(split);    
          int leg = s.length();    
          return i > 0 ? (i + 1) == leg ? " " : s.substring(i+1, s.length()) : " ";    
      }    
      
    private String getUUIDFileName(String fileName){    
           UUID uuid = UUID.randomUUID();    
           StringBuilder sb = new StringBuilder(100);    
           sb.append(uuid.toString()).append(".").append(this.getExtName(fileName, '.'));    
           return sb.toString();    
       }  

9.上传controller的代码不全,因为我上传的是我公司的服务器 代码有点长,我大概改了一下, 基本上思路就是upfile我们使用@RequestParam就可以之间拿到,所以就拿到他的属性,set到knowFileVO 类中(这段代码没写)。然后参数放到map中返回去就行。这个url,要和你本地存放图片的路径相同就行。

10.


11.如何删除在线搜索按钮和在线管理按钮。在image.html中注释掉如下两行,有的可能会报错,可以直接删除掉就可以了。

阅读全文
0 0
原创粉丝点击