前言

最近在做工作流的事情，正好有个需求，要添加一个附件上传的功能，曾找过不少上传插件，都不是特别满意。无意中发现一个很好用的开源web文件管理器插件 elfinder，功能比较完善，社区也很活跃，还方便二次开发。

环境搭建

软件 地址
SpringBoot https://spring.io/projects/spring-boot/
elFinder https://studio-42.github.io/elFinder/

项目截图

周末抽时间做了一个简单的案例，希望对大家有所帮助，下面是简单的项目截图。



项目功能

在线新建目录、文件、附件上传、下载、预览、在线打包，图片在线裁剪、编辑，实现列表试图、图标视图等等一些列功能。

项目配置

项目在第三方插件进行二次开发，基于 SpringBoot 注解配置实现。

application.properties 配置：

  1. # 执行类，内部调用，实现前端相关功能
  2. file-manager.command=com.itstyle.cloud.common.elfinder.command
  3. file-manager.thumbnail.width=80
  4. file-manager.volumes[0].Node=
  5. file-manager.volumes[0].source=fileSystem
  6. file-manager.volumes[0].alias=file
  7. # 文件存放目录，可以自定义
  8. file-manager.volumes[0].path=D:/cloudFile
  9. file-manager.volumes[0]._default=true
  10. file-manager.volumes[0].locale=
  11. file-manager.volumes[0].constraint.locked=false
  12. file-manager.volumes[0].constraint.readable=true
  13. file-manager.volumes[0].constraint.writable=true

ElfinderConfiguration 读取配置：

  1. @Component
  2. @ConfigurationProperties(prefix="file-manager") //接收application.properties中的file-manager下面的属性
  3. public class ElfinderConfiguration {
  5.     private Thumbnail thumbnail;
  7.     private String command;
  9.     private List<Node> volumes;
  11.     private Long maxUploadSize = -1L;
  13.     //省略部分代码
  14. }

elfinderStorageFactory 初始化 基础Bean：

  1. @Configuration
  2. public class ElFinderConfig {
  4.     @Autowired
  5.     private ElfinderConfiguration elfinderConfiguration;
  7.     @Bean(name = "commandFactory")
  8.     public CommandFactory getCommandFactory() {
  9.         CommandFactory commandFactory = new CommandFactory();
  10.         commandFactory.setClassNamePattern(elfinderConfiguration.getCommand()+".%sCommand");
  11.         return commandFactory;
  12.     }
  14.     @Bean(name = "elfinderStorageFactory")
  15.     public ElfinderStorageFactory getElfinderStorageFactory() {
  16.         DefaultElfinderStorageFactory elfinderStorageFactory = new DefaultElfinderStorageFactory();
  17.         elfinderStorageFactory.setElfinderStorage(getElfinderStorage());
  18.         return elfinderStorageFactory;
  19.     }
  21.     @Bean(name = "elfinderStorage")
  22.     public ElfinderStorage getElfinderStorage() {
  23.         DefaultElfinderStorage defaultElfinderStorage = new DefaultElfinderStorage();
  25.         // creates thumbnail
  26.         DefaultThumbnailWidth defaultThumbnailWidth = new DefaultThumbnailWidth();
  27.         defaultThumbnailWidth.setThumbnailWidth(elfinderConfiguration.getThumbnail().getWidth().intValue());
  29.         // creates volumes, volumeIds, volumeLocale and volumeSecurities
  30.         Character defaultVolumeId = 'A';
  31.         List<Node> elfinderConfigurationVolumes = elfinderConfiguration.getVolumes();
  32.         List<Volume> elfinderVolumes = new ArrayList<>(elfinderConfigurationVolumes.size());
  33.         Map<Volume, String> elfinderVolumeIds = new HashMap<>(elfinderConfigurationVolumes.size());
  34.         Map<Volume, Locale> elfinderVolumeLocales = new HashMap<>(elfinderConfigurationVolumes.size());
  35.         List<VolumeSecurity> elfinderVolumeSecurities = new ArrayList<>();
  37.         // creates volumes
  38.         for (Node elfinderConfigurationVolume : elfinderConfigurationVolumes) {
  40.             final String alias = elfinderConfigurationVolume.getAlias();
  41.             final String path = elfinderConfigurationVolume.getPath();
  42.             final String source = elfinderConfigurationVolume.getSource();
  43.             final String locale = elfinderConfigurationVolume.getLocale();
  44.             final boolean isLocked = elfinderConfigurationVolume.getConstraint().isLocked();
  45.             final boolean isReadable = elfinderConfigurationVolume.getConstraint().isReadable();
  46.             final boolean isWritable = elfinderConfigurationVolume.getConstraint().isWritable();
  48.             // creates new volume
  49.             Volume volume = VolumeSources.of(source).newInstance(alias, path);
  51.             elfinderVolumes.add(volume);
  52.             elfinderVolumeIds.put(volume, Character.toString(defaultVolumeId));
  53.             elfinderVolumeLocales.put(volume, LocaleUtils.toLocale(locale));
  55.             // creates security constraint
  56.             SecurityConstraint securityConstraint = new SecurityConstraint();
  57.             securityConstraint.setLocked(isLocked);
  58.             securityConstraint.setReadable(isReadable);
  59.             securityConstraint.setWritable(isWritable);
  61.             // creates volume pattern and volume security
  62.             final String volumePattern = Character.toString(defaultVolumeId) + ElFinderConstants.ELFINDER_VOLUME_SERCURITY_REGEX;
  63.             elfinderVolumeSecurities.add(new DefaultVolumeSecurity(volumePattern, securityConstraint));
  65.             // prepare next volumeId character
  66.             defaultVolumeId++;
  67.         }
  69.         defaultElfinderStorage.setThumbnailWidth(defaultThumbnailWidth);
  70.         defaultElfinderStorage.setVolumes(elfinderVolumes);
  71.         defaultElfinderStorage.setVolumeIds(elfinderVolumeIds);
  72.         defaultElfinderStorage.setVolumeLocales(elfinderVolumeLocales);
  73.         defaultElfinderStorage.setVolumeSecurities(elfinderVolumeSecurities);
  74.         return defaultElfinderStorage;
  75.     }
  76. }

CloudDiskController 控制层实现：

  1. @Controller
  2. @RequestMapping("elfinder/connector")
  3. public class CloudDiskController {
  5.     private static final Logger logger = LoggerFactory.getLogger(CloudDiskController.class);
  7.     public static final String OPEN_STREAM = "openStream";
  8.     public static final String GET_PARAMETER = "getParameter";
  10.     @Resource(name = "commandFactory")
  11.     private ElfinderCommandFactory elfinderCommandFactory;
  13.     @Resource(name = "elfinderStorageFactory")
  14.     private ElfinderStorageFactory elfinderStorageFactory;
  16.     @RequestMapping
  17.     public void connector(HttpServletRequest request, final HttpServletResponse response) throws IOException {
  18.         try {
  19.         	response.setCharacterEncoding("UTF-8");
  20.             request = processMultipartContent(request);
  21.         } catch (Exception e) {
  22.             throw new IOException(e.getMessage());
  23.         }
  25.         String cmd = request.getParameter(ElFinderConstants.ELFINDER_PARAMETER_COMMAND);
  26.         ElfinderCommand elfinderCommand = elfinderCommandFactory.get(cmd);
  28.         try {
  29.             final HttpServletRequest protectedRequest = request;
  30.             elfinderCommand.execute(new ElfinderContext() {
  31.                 @Override
  32.                 public ElfinderStorageFactory getVolumeSourceFactory() {
  33.                     return elfinderStorageFactory;
  34.                 }
  36.                 @Override
  37.                 public HttpServletRequest getRequest() {
  38.                     return protectedRequest;
  39.                 }
  41.                 @Override
  42.                 public HttpServletResponse getResponse() {
  43.                     return response;
  44.                 }
  45.             });
  46.         } catch (Exception e) {
  47.             logger.error("Unknown error", e);
  48.         }
  49.     }
  50.     //省略部分代码
  51. }

最后，前端页面引入：

  1. <div id="elfinder"></div>
  2. <script type="text/javascript" charset="utf-8">
  3.         window.onload = function() {
  4.             elFinder.prototype.loadCss('/elfinder/jquery-ui-1.12.1.custom/jquery-ui.css');
  5.             $('#elfinder').elfinder({
  6.                 url : '/elfinder/connector',
  7.                 lang: 'zh_CN',
  8.                 height : window.innerHeight-20,
  9.                 commandsOptions: {
  10.                     edit: {
  11.                         editors : [
  12.                             {
  13.                                 info:{
  14.                                     name:'编辑',
  15.                                     urlAsContent: false
  16.                                 },
  17.                                 // ACE Editor
  18.                                 // `mimes` is not set for support everything kind of text file
  19.                                 load : function(textarea) {
  20.                                     var self = this,
  21.                                         dfrd = $.Deferred(),
  22.                                         cdn  = './elfinder/ace/',
  23.                                         init = function() {
  24.                                             if (typeof ace === 'undefined') {
  25.                                                 console.log(cdn);
  26.                                                 this.fm.loadScript([
  27.                                                     cdn+'/ace.js',
  28.                                                     cdn+'/ext-modelist.js',
  29.                                                     cdn+'/ext-settings_menu.js',
  30.                                                     cdn+'/ext-language_tools.js'
  31.                                                 ], start);
  32.                                             } else {
  33.                                                 start();
  34.                                             }
  35.                                         },
  36.                                         start = function() {
  37.                                             var editor, editorBase, mode,
  38.                                                 ta = $(textarea),
  39.                                                 taBase = ta.parent(),
  40.                                                 dialog = taBase.parent(),
  41.                                                 id = textarea.id + '_ace',
  42.                                                 ext = self.file.name.replace(/^.+\.([^.]+)|(.+)$/, '$1$2').toLowerCase(),
  43.                                                 // MIME/mode map
  44.                                                 mimeMode = {
  45.                                                     'text/x-php'              : 'php',
  46.                                                     'application/x-php'       : 'php',
  47.                                                     'text/html'               : 'html',
  48.                                                     'application/xhtml+xml'   : 'html',
  49.                                                     'text/javascript'         : 'javascript',
  50.                                                     'application/javascript'  : 'javascript',
  51.                                                     'text/css'                : 'css',
  52.                                                     'text/x-c'                : 'c_cpp',
  53.                                                     'text/x-csrc'             : 'c_cpp',
  54.                                                     'text/x-chdr'             : 'c_cpp',
  55.                                                     'text/x-c++'              : 'c_cpp',
  56.                                                     'text/x-c++src'           : 'c_cpp',
  57.                                                     'text/x-c++hdr'           : 'c_cpp',
  58.                                                     'text/x-shellscript'      : 'sh',
  59.                                                     'application/x-csh'       : 'sh',
  60.                                                     'text/x-python'           : 'python',
  61.                                                     'text/x-java'             : 'java',
  62.                                                     'text/x-java-source'      : 'java',
  63.                                                     'text/x-ruby'             : 'ruby',
  64.                                                     'text/x-perl'             : 'perl',
  65.                                                     'application/x-perl'      : 'perl',
  66.                                                     'text/x-sql'              : 'sql',
  67.                                                     'text/xml'                : 'xml',
  68.                                                     'application/docbook+xml' : 'xml',
  69.                                                     'application/xml'         : 'xml'
  70.                                                 };
  72.                                             // set basePath of ace
  73.                                             ace.config.set('basePath', cdn);
  75.                                             // set base height
  76.                                             taBase.height(taBase.height());
  78.                                             // detect mode
  79.                                             mode = ace.require('ace/ext/modelist').getModeForPath('/' + self.file.name).name;
  80.                                             if (mode === 'text') {
  81.                                                 if (mimeMode[self.file.mime]) {
  82.                                                     mode = mimeMode[self.file.mime];
  83.                                                 }
  84.                                             }
  86.                                             // show MIME:mode in title bar
  87.                                             taBase.prev().children('.elfinder-dialog-title').append(' (' + self.file.mime + ' : ' + mode.split(/[\/\\]/).pop() + ')');
  88.                                             // TextArea button and Setting button
  89.                                             $('<div class="ui-dialog-buttonset"/>').css('float', 'left')
  90.                                                 .append(
  91.                                                     $('<button>文本框</button>')
  92.                                                         .button()
  93.                                                         .on('click', function(){
  94.                                                             if (ta.data('ace')) {
  95.                                                                 ta.removeData('ace');
  96.                                                                 editorBase.hide();
  97.                                                                 ta.val(editor.session.getValue()).show().focus();
  98.                                                                 $(this).text('编辑器');
  99.                                                             } else {
  100.                                                                 ta.data('ace', true);
  101.                                                                 editorBase.show();
  102.                                                                 editor.setValue(ta.hide().val(), -1);
  103.                                                                 editor.focus();
  104.                                                                 $(this).text('文本框');
  105.                                                             }
  106.                                                         })
  107.                                                 )
  108.                                                 .append(
  109.                                                     $('<button>Ace editor setting</button>')
  110.                                                         .button({
  111.                                                             icons: {
  112.                                                                 primary: 'ui-icon-gear',
  113.                                                                 secondary: 'ui-icon-triangle-1-e'
  114.                                                             },
  115.                                                             text: false
  116.                                                         })
  117.                                                         .on('click', function(){
  118.                                                             editor.showSettingsMenu();
  119.                                                         })
  120.                                                 )
  121.                                                 .prependTo(taBase.next());
  123.                                             // Base node of Ace editor
  124.                                             editorBase = $('<div id="'+id+'" style="width:100%; height:100%;"/>').text(ta.val()).insertBefore(ta.hide());
  126.                                             // Ace editor configure
  127.                                             ta.data('ace', true);
  128.                                             editor = ace.edit(id);
  129.                                             ace.require('ace/ext/language_tools');
  130.                                             ace.require('ace/ext/settings_menu').init(editor);
  131.                                             editor.$blockScrolling = Infinity;
  132.                                             editor.setOptions({
  133.                                                 theme: 'ace/theme/dawn',
  134.                                                 mode: 'ace/mode/' + mode,
  135.                                                 fontSize: '14px',
  136.                                                 wrap: true,
  137.                                                 enableBasicAutocompletion: true,
  138.                                                 enableSnippets: true,
  139.                                                 enableLiveAutocompletion: true
  140.                                             });
  141.                                             editor.commands.addCommand({
  142.                                                 name : "saveFile",
  143.                                                 bindKey: {
  144.                                                     win : 'Ctrl-s',
  145.                                                     mac : 'Command-s'
  146.                                                 },
  147.                                                 exec: function(editor) {
  148.                                                     self.doSave();
  149.                                                 }
  150.                                             });
  151.                                             editor.commands.addCommand({
  152.                                                 name : "closeEditor",
  153.                                                 bindKey: {
  154.                                                     win : 'Ctrl-w|Ctrl-q',
  155.                                                     mac : 'Command-w|Command-q'
  156.                                                 },
  157.                                                 exec: function(editor) {
  158.                                                     self.doCancel();
  159.                                                 }
  160.                                             });
  162.                                             editor.resize();
  164.                                             dfrd.resolve(editor);
  165.                                         };
  167.                                     // init & start
  168.                                     init();
  170.                                     return dfrd;
  171.                                 },
  172.                                 close : function(textarea, instance) {
  173.                                     if (instance) {
  174.                                         instance.destroy();
  175.                                         $(textarea).show();
  176.                                     }
  177.                                 },
  178.                                 save : function(textarea, instance) {
  179.                                     instance && $(textarea).data('ace') && (textarea.value = instance.session.getValue());
  180.                                 },
  181.                                 focus : function(textarea, instance) {
  182.                                     instance && $(textarea).data('ace') && instance.focus();
  183.                                 },
  184.                                 resize : function(textarea, instance, e, data) {
  185.                                     instance && instance.resize();
  186.                                 }
  187.                             }
  188.                         ]
  189.                     },
  190.                     quicklook : {
  191.                         // to enable preview with Google Docs Viewer
  192.                         googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
  193.                     }
  194.                 }
  195.             });
  196.         };
  197.     </script>

小结

总体来说个人使用还是非常不错的，当然对于一些成熟的网盘系统还是有一些差距。

源码：https://gitee.com/52itstyle/spring-boot-CloudDisk

SpringBoot开发案例之打造私有云网盘的更多相关文章

  1. SpringBoot开发案例之打造十万博文Web篇

    前言 通过 Python 爬取十万博文之后,最重要的是要让互联网用户访问到,那么如何做呢? 选型 从后台框架.前端模板.数据库连接池.缓存.代理服务.限流等组件多个维度选型. 后台框架 SpringB ...

  2. FreeNAS插件打造ownCloud私有云网盘

    ownCloud 是一个自由开源的个人云存储解决方案,可以自由获取无需付费,但用户需要自行架设服务器,好在FreeNAS可以通过插件轻松的构建ownCloud服务器. ownCloud 分为服务器端和 ...

  3. KODExplorer可道云-轻松搭建属于自己/团队的私有云网盘服务

    如今国内各大网盘关停的也快差不多,百度网盘限速严重.国外大牌的如 Dropbox 或 Google Drive又在长城之外,在各种VPN都被封禁的大背景下,科学上网也困难重重,麻烦到要死.那么,除了购 ...

  4. SpringBoot开发案例之多任务并行+线程池处理

    前言 前几篇文章着重介绍了后端服务数据库和多线程并行处理优化,并示例了改造前后的伪代码逻辑.当然了,优化是无止境的,前人栽树后人乘凉.作为我们开发者来说,既然站在了巨人的肩膀上,就要写出更加优化的程序 ...

  5. SpringBoot开发案例从0到1构建分布式秒杀系统

    前言 ​最近,被推送了不少秒杀架构的文章,忙里偷闲自己也总结了一下互联网平台秒杀架构设计,当然也借鉴了不少同学的思路.俗话说,脱离案例讲架构都是耍流氓,最终使用SpringBoot模拟实现了部分秒杀场 ...

  6. SpringBoot开发案例之整合Activiti工作流引擎

    前言 JBPM是目前市场上主流开源工作引擎之一,在创建者Tom Baeyens离开JBoss后,JBPM的下一个版本jBPM5完全放弃了jBPM4的基础代码,基于Drools Flow重头来过,目前官 ...

  7. SpringBoot开发案例之整合Dubbo分布式服务

    前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...

  8. SpringBoot开发案例之整合Kafka实现消息队列

    前言 最近在做一款秒杀的案例,涉及到了同步锁.数据库锁.分布式锁.进程内队列以及分布式消息队列,这里对SpringBoot集成Kafka实现消息队列做一个简单的记录. Kafka简介 Kafka是由A ...

  9. 利用可道云kodexplorer在树莓派raspbian上搭建私有云网盘

    可道云kodexplorer是一款开源私有云系统,类似于owncloud,Dropbox.SkyDrive,seafile等.将可道云kodexplorer搭建在树莓派上,从而在树莓派上存储.管理家庭 ...

随机推荐

  1. 数据库优化案例——————某知名零售企业ERP系统

    写在前面 记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也分享自己做的优化案例. 之前分享过OA系统.H ...

  2. wtf！rds数据同步居然出问题了--菜鸟db的数据修复历程

    由于一次上线操作的数据变更太多,导致执行时间很长! 由于做手动主从关系,所以操作落在了主库上. 由于主从关系不是对整个库的操作,所以在有表新增的地方,添加了dts新的同步关系. db变更完成后,就发布 ...

  3. Java数据结构和算法 - 堆

    堆的介绍 Q: 什么是堆? A: 这里的“堆”是指一种特殊的二叉树,不要和Java.C/C++等编程语言里的“堆”混淆,后者指的是程序员用new能得到的计算机内存的可用部分 A: 堆是有如下特点的二叉 ...

  4. springboot打包不同环境配置与shell脚本部署

    本篇和大家分享的是springboot打包并结合shell脚本命令部署,重点在分享一个shell程序启动工具,希望能便利工作: profiles指定不同环境的配置 maven-assembly-plu ...

  5. 【Python篇】---Python3.5在Centoos的安装教程--超实用

    一.前述 Python3在公司用的还是比较多的,但一般Centoos默认是python2的环境.所以本文就python3的安装做个总结. 二.具体 1.查看python版本python 命令即可 2. ...

  6. property相关补充

    # Author : Kelvin # Date : 2019/1/25 15:20 class Foo: def __init__(self): self.original_price = 100 ...

  7. Linux文本三剑客超详细教程---grep、sed、awk

    awk.grep.sed是linux操作文本的三大利器,合称文本三剑客,也是必须掌握的linux命令之一.三者的功能都是处理文本,但侧重点各不相同,其中属awk功能最强大,但也最复杂.grep更适合单 ...

  8. Maven-常用插件

    罗列笔者认为比较有用的一些maven打包插件,方便后续查阅 spring-boot-maven-plugin springboot自带的maven插件,可用于简单的JAR/WAR方式打包,官方地址为h ...

  9. 【带着canvas去流浪（6）】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  10. 杭电ACM2019--数列有序!

    数列有序! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...