java+Spring+Ueditor实现图片上传功能

公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录。

不能满足要求,尝试改造了一下上传图片的功能。

下载下来的编辑器直接导入项目webapp目录下

因为用的是Spring框架,基本已经包含了ueditor需要的几个jar包,所以不需要导入了。

需要注意的是,这个ueditor-1.1.1.jar的这个jar包,其实不需要导入,因为这个包里面就只有一个文件Uploader.java

而在ueditor的jsp目录下已经有了Uploader.java文件,所以直接把这个文件copy到工作区中,访问这个文件就可以了。

在调用的地方改一下目录

<%@ page import="com.baidu.ueditor.um.Uploader" %>

改成

<%@ page import="com.myproject.upload.Uploader"%>

如下图:

然后关键就是要改造一下Uploader.java这个类。

原有上传代码如下:

 代码如下 复制代码

public void upload() throws Exception {
        boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
        if (!isMultipart) {
            this.state = this.errorInfo.get("NOFILE");
            return;
        }
        DiskFileItemFactory dff = new DiskFileItemFactory();
        String savePath = this.getFolder(this.savePath);
        dff.setRepository(new File(savePath));
        try {
            ServletFileUpload sfu = new ServletFileUpload(dff);
            sfu.setSizeMax(this.maxSize * 1024);
            sfu.setHeaderEncoding("utf-8");
            FileItemIterator fii = sfu.getItemIterator(this.request);
            while (fii.hasNext()) {
                FileItemStream fis = fii.next();
                if (!fis.isFormField()) {
                    this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);
                    if (!this.checkFileType(this.originalName)) {
                        this.state = this.errorInfo.get("TYPE");
                        continue;
                    }
                    this.fileName = this.getName(this.originalName);
                    this.type = this.getFileExt(this.fileName);
                    // 获取了存放文件的相对路径
                    this.url = savePath + "/" + this.fileName;
                    BufferedInputStream in = new BufferedInputStream(fis.openStream());
                    File file = new File(this.getPhysicalPath(this.url));
                    FileOutputStream out = new FileOutputStream( file );
                    BufferedOutputStream output = new BufferedOutputStream(out);
                    // 这里直接在服务器根目录生成了图片文件
                    Streams.copy(in, output, true);
                    this.state=this.errorInfo.get("SUCCESS");
                    this.size = file.length();
                    //UE中只会处理单张上传,完成后即退出
                    break;
                } else {
                    String fname = fis.getFieldName();
                    //只处理title,其余表单请自行处理
                    if(!fname.equals("pictitle")){
                        continue;
                    }
                    BufferedInputStream in = new BufferedInputStream(fis.openStream());
                    BufferedReader reader = new BufferedReader(new InputStreamReader(in));
                    StringBuffer result = new StringBuffer(); 
                    while (reader.ready()) { 
                        result.append((char)reader.read()); 
                    }
                    this.title = new String(result.toString().getBytes(),"utf-8");
                    reader.close(); 
                    
                }
            }
        } catch (SizeLimitExceededException e) {
            this.state = this.errorInfo.get("SIZE");
        } catch (InvalidContentTypeException e) {
            this.state = this.errorInfo.get("ENTYPE");
        } catch (FileUploadException e) {
            this.state = this.errorInfo.get("REQUEST");
        } catch (Exception e) {
            this.state = this.errorInfo.get("UNKNOWN");
        }
}

修改后:

 代码如下 复制代码

// 改造后的代码,百度原有代码注释了
    public void upload() throws Exception
    {
        boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
        if (!isMultipart)
        {
            this.state = this.errorInfo.get("NOFILE");
            return;
        }
        try
        {
            MultipartResolver resolver = new CommonsMultipartResolver(
                    this.request.getSession().getServletContext());
            MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
            CommonsMultipartFile orginalFile = (CommonsMultipartFile) multipartRequest.getFile("upfile");
            
            this.originalName = orginalFile.getOriginalFilename();
            if (!this.checkFileType(this.originalName))
            {
                this.state = this.errorInfo.get("TYPE");
                return;
            }
            this.type = this.getFileExt(this.originalName);
            this.size = orginalFile.getSize();
            
            // 这里是公司内部上传到阿里云服务器的工具类
            String key = ImgUtils.uploadImage("xxxx",
                    ImageKind.Picture,
                    orginalFile.getInputStream(),
                    this.size);
            
            this.fileName = key;
            this.url = "http://xxx.aliyuncs.com/" + key;
            this.state = this.errorInfo.get("SUCCESS");
        }
        catch (Exception e)
        {
            this.state = this.errorInfo.get("UNKNOWN");
        }
}

用到了Spring的这两个文件

 代码如下 复制代码

import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

然后编辑器页面上显示的时候,img的src目录需要改一下

 代码如下 复制代码

callback: function (editor, $w, url, state) {
            if (state == "SUCCESS") {
                //显示图片计数+1
                Upload.showCount++;
                var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
                var $img = $("<img src='" + url + "' class='edui-image-pic' />"),
                    $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);
                if ($(".edui-image-upload2", $w).length < 1) {
                    $(".edui-image-content", $w).append($item);
                    Upload.render(".edui-image-content", 2)
                        .config(".edui-image-upload2");
                } else {
                    $(".edui-image-upload2", $w).before($item).show();
                }
                $img.on("load", function () {
                    Base.scale(this, 120);
                    Base.close($(this));
                    $(".edui-image-content", $w).focus();
                });
            } else {
                currentDialog.showTip( state );
                window.setTimeout( function () {
                    currentDialog.hideTip();
                }, 3000 );
            }
            Upload.toggleMask();
        }

时间: 2024-10-15 02:26:38

java+Spring+Ueditor实现图片上传功能的相关文章

c# 客户端 调用 java Webservice 实现图片上传功能

问题描述 c# 客户端 调用 java Webservice 实现图片上传功能 no SOAPAction header c#端添加服务引用 生成实体类 直接调用webservice图片上传方法 结果报错**no SOAPAction header** 解决方案 有没有大神 来帮帮忙 解决方案二: 参考这个:http://blog.csdn.net/wxyong3/article/details/38727503

百度UEditor编辑器图片上传目录的修改设置教程

方法一,通过修改php来改变UEditor编辑器图片上传目录 UEditor的图片上传需要自己设置一下功能才能正常.同时,如下图所示,图片上传插件的"在线管理"."图片搜索"等无意义的功能,需要自己手动根除一下.   还有,一般情况下,编辑器的图片存储目录,上传目录就是一个,不应该给用户自己手动选择,也是需要自己手动删除的. 修改过程如下: 1.首先打开(ueditor1_3_6-utf8-php根目录)\php\config.php将代码改成如下所示:    &l

iOS实现压缩图片上传功能_IOS

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

如何用 React 完成图片上传功能?

本文讲的是如何用 React 完成图片上传功能?, 下面这篇特邀文章是由 Damon Bauer 完成的,主题是关于一个 web 开发人员非常常见的工作:为用户提供图片上传功能.我想说这并不容易,但是有了一些功能强大的工具来帮忙做一些比较"重"的工作,这个任务会觉得比以前轻松许多.Damon 甚至全程在浏览器中完成了这项任务! 对于 web 开发者来说,让用户能够上传图片是一件很常见的事情.一开始可能看起来小菜一碟,但是当真正创建一个图片上传组件的时候,还是有些问题需要去考虑的.这里有

PHP中Ckeditor+Ckfinder配置图片上传功能

第一:安装配置CKEditor 在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下. 1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/. 第一:安装配置CKEditor ,可改/admin/ckeditor/ckeditor.js来配置编辑器,如字体.背景色.语言 .界面高宽.编辑器按钮分布等  代码如下 复制代码 config.language = 'en'; config.skin =

如何在SAE上使用Ueditor图片上传功能

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath): ''''' 省略

关于jsp页面的图片上传功能

问题描述 后台管理系统要求在上传新闻相关内容的时,需要图片的时候也上传图片,就是内容和图片一起上传,这个图片上传功能我不会,做过页面只有一个图片上传的,那时form表单发送的request只有图片,现在不仅有图片还有大量的新闻内容,按照以前的写法,报的是格式错误!网上找了一些插件,都不是jsp页面上写的,我下了uploadify 3.2版的,又上传不了!现在求一个用jsp页面上实现的图片上传功能简单列子,希望贴出后台的java代码,用servlet写!万分感激! 解决方案 你可以使用网上很多富文

扩展FCKeditor编辑器的图片上传功能

在我使用的个人博客(Mr.d's Time)中,后台的文章发布使用的是FCKeditor编辑器,在FCKeditor编辑器中通过简单的配置就能使用已提 供的图片上传的功能.但没有提供对上传后的图片进行管理,从而无法满足我日后的各种应用场景,比如:使用已上传的文件.删除已上传的 文件等等,以至于在写博时,遇到"在文章中要插入图片"这样的应用让我的操作很繁琐(上传图片---记住文件件 ---手工写Url),因此无 法让我享受到在写博时的快感.从而让我有了扩展FCKeditor编辑器图片上传

spring mvc-Spring mvc 图片上传,求代码

问题描述 Spring mvc 图片上传,求代码 Spring mvc 图片上传,public void savePhoto(InputStream inputStream) throws Exception 里面怎么写 解决方案 Spring Mvc 上传图片代码spring MVC 上传图片 DEMOspring mvc 上传图片---------------------- 解决方案二: @RequestMapping("saveAdvertFile.action") public