总阅读量:次

⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 https://mp.weixin.qq.com/s?__biz=MzIwNTk5NjEzNw==&mid=2247487982&idx=1&sn=66ab0b1415e00575c89664f597a581ff&scene=0 「小柒2012」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注**微信公众号：【芋道源码】**有福利：

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

前言

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

环境搭建

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

项目截图

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

项目功能

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

项目配置

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

application.properties 配置：

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

ElfinderConfiguration 读取配置：

@Component
@ConfigurationProperties(prefix="file-manager") //接收application.properties中的file-manager下面的属性
public class ElfinderConfiguration {

    private Thumbnail thumbnail;

    private String command;

    private List<Node> volumes;

    private Long maxUploadSize = -1L;

    //省略部分代码

}

elfinderStorageFactory 初始化 基础Bean：

@Configuration
public class ElFinderConfig {

	@Autowired
	private ElfinderConfiguration elfinderConfiguration;

	@Bean(name = "commandFactory")
	public CommandFactory getCommandFactory() {
		CommandFactory commandFactory = new CommandFactory();
		commandFactory.setClassNamePattern(elfinderConfiguration.getCommand()+".%sCommand");
		return commandFactory;
	}

	@Bean(name = "elfinderStorageFactory")
	public ElfinderStorageFactory getElfinderStorageFactory() {
		DefaultElfinderStorageFactory elfinderStorageFactory = new DefaultElfinderStorageFactory();
		elfinderStorageFactory.setElfinderStorage(getElfinderStorage());
		return elfinderStorageFactory;
	}

	@Bean(name = "elfinderStorage")
	public ElfinderStorage getElfinderStorage() {
		DefaultElfinderStorage defaultElfinderStorage = new DefaultElfinderStorage();
		// creates thumbnail
		DefaultThumbnailWidth defaultThumbnailWidth = new DefaultThumbnailWidth();
		defaultThumbnailWidth.setThumbnailWidth(elfinderConfiguration.getThumbnail().getWidth().intValue());
		// creates volumes, volumeIds, volumeLocale and volumeSecurities
		Character defaultVolumeId = 'A';
		List<Node> elfinderConfigurationVolumes = elfinderConfiguration.getVolumes();
		List<Volume> elfinderVolumes = new ArrayList<>(elfinderConfigurationVolumes.size());
		Map<Volume, String> elfinderVolumeIds = new HashMap<>(elfinderConfigurationVolumes.size());
		Map<Volume, Locale> elfinderVolumeLocales = new HashMap<>(elfinderConfigurationVolumes.size());
		List<VolumeSecurity> elfinderVolumeSecurities = new ArrayList<>();
		// creates volumes
		for (Node elfinderConfigurationVolume : elfinderConfigurationVolumes) {
			final String alias = elfinderConfigurationVolume.getAlias();
			final String path = elfinderConfigurationVolume.getPath();
			final String source = elfinderConfigurationVolume.getSource();
			final String locale = elfinderConfigurationVolume.getLocale();
			final Boolean isLocked = elfinderConfigurationVolume.getConstraint().isLocked();
			final Boolean isReadable = elfinderConfigurationVolume.getConstraint().isReadable();
			final Boolean isWritable = elfinderConfigurationVolume.getConstraint().isWritable();
			// creates new volume
			Volume volume = VolumeSources.of(source).newInstance(alias, path);
			elfinderVolumes.add(volume);
			elfinderVolumeIds.put(volume, Character.toString(defaultVolumeId));
			elfinderVolumeLocales.put(volume, LocaleUtils.toLocale(locale));
			// creates security constraint
			SecurityConstraint securityConstraint = new SecurityConstraint();
			securityConstraint.setLocked(isLocked);
			securityConstraint.setReadable(isReadable);
			securityConstraint.setWritable(isWritable);
			// creates volume pattern and volume security
			final String volumePattern = Character.toString(defaultVolumeId) + ElFinderConstants.ELFINDER_VOLUME_SERCURITY_REGEX;
			elfinderVolumeSecurities.add(new DefaultVolumeSecurity(volumePattern, securityConstraint));
			// prepare next volumeId character
			defaultVolumeId++;
		}
		defaultElfinderStorage.setThumbnailWidth(defaultThumbnailWidth);
		defaultElfinderStorage.setVolumes(elfinderVolumes);
		defaultElfinderStorage.setVolumeIds(elfinderVolumeIds);
		defaultElfinderStorage.setVolumeLocales(elfinderVolumeLocales);
		defaultElfinderStorage.setVolumeSecurities(elfinderVolumeSecurities);
		return defaultElfinderStorage;
	}
}

CloudDiskController 控制层实现：

@Controller
@RequestMapping("elfinder/connector")
public class CloudDiskController {

	private static final Logger logger = LoggerFactory.getLogger(CloudDiskController.class);

	public static final String OPEN_STREAM = "openStream";
	public static final String GET_PARAMETER = "getParameter";

	@Resource(name = "commandFactory")
	private ElfinderCommandFactory elfinderCommandFactory;

	@Resource(name = "elfinderStorageFactory")
	private ElfinderStorageFactory elfinderStorageFactory;

	@RequestMapping
	public void connector(HttpServletRequest request, final HttpServletResponse response) throws IOException {
		try {
			response.setCharacterEncoding("UTF-8");
			request = processMultipartContent(request);
		}
		catch (Exception e) {
			throw new IOException(e.getMessage());
		}
		String cmd = request.getParameter(ElFinderConstants.ELFINDER_PARAMETER_COMMAND);
		ElfinderCommand elfinderCommand = elfinderCommandFactory.get(cmd);
		try {
			final HttpServletRequest protectedRequest = request;
			elfinderCommand.execute(new ElfinderContext() {
				@Override
				                public ElfinderStorageFactory getVolumeSourceFactory() {
					return elfinderStorageFactory;
				}
				@Override
				                public HttpServletRequest getRequest() {
					return protectedRequest;
				}
				@Override
				                public HttpServletResponse getResponse() {
					return response;
				}
			}
			);
		}
		catch (Exception e) {
			logger.error("Unknown error", e);
		}
	}

	//省略部分代码
}

最后，前端页面引入：

< div id = "elfinder" > </div>

<script type="text/javascript " charset="utf - 8 ">
        window.onload = function() {
            elFinder.prototype.loadCss('/elfinder/jquery-ui-1.12.1.custom/jquery-ui.css');
            $('#elfinder').elfinder({
                url : '/elfinder/connector',
                lang: 'zh_CN',
                height : window.innerHeight-20,
                commandsOptions: {
                    edit: {
                        editors : [
                            {
                                info:{
                                    name:'编辑',
                                    urlAsContent: false
                                },
                                // ACE Editor
                                // `mimes` is not set for support everything kind of text file
                                load : function(textarea) {
                                    var self = this,
                                        dfrd = $.Deferred(),
                                        cdn  = './elfinder/ace/',
                                        init = function() {
                                            if (typeof ace === 'undefined') {
                                                console.log(cdn);
                                                this.fm.loadScript([
                                                    cdn+'/ace.js',
                                                    cdn+'/ext-modelist.js',
                                                    cdn+'/ext-settings_menu.js',
                                                    cdn+'/ext-language_tools.js'
                                                ], start);
                                            } else {
                                                start();
                                            }
                                        },
                                        start = function() {
                                            var editor, editorBase, mode,
                                                ta = $(textarea),
                                                taBase = ta.parent(),
                                                dialog = taBase.parent(),
                                                id = textarea.id + '_ace',
                                                ext = self.file.name.replace(/^.+\.([^.]+)|(.+)$/, '$1$2').toLowerCase(),
                                                // MIME/mode map
                                                mimeMode = {
                                                    'text/x-php'              : 'php',
                                                    'application/x-php'       : 'php',
                                                    'text/html'               : 'html',
                                                    'application/xhtml+xml'   : 'html',
                                                    'text/javascript'         : 'javascript',
                                                    'application/javascript'  : 'javascript',
                                                    'text/css'                : 'css',
                                                    'text/x-c'                : 'c_cpp',
                                                    'text/x-csrc'             : 'c_cpp',
                                                    'text/x-chdr'             : 'c_cpp',
                                                    'text/x-c++'              : 'c_cpp',
                                                    'text/x-c++src'           : 'c_cpp',
                                                    'text/x-c++hdr'           : 'c_cpp',
                                                    'text/x-shellscript'      : 'sh',
                                                    'application/x-csh'       : 'sh',
                                                    'text/x-python'           : 'python',
                                                    'text/x-java'             : 'java',
                                                    'text/x-java-source'      : 'java',
                                                    'text/x-ruby'             : 'ruby',
                                                    'text/x-perl'             : 'perl',
                                                    'application/x-perl'      : 'perl',
                                                    'text/x-sql'              : 'sql',
                                                    'text/xml'                : 'xml',
                                                    'application/docbook+xml' : 'xml',
                                                    'application/xml'         : 'xml'
                                                };

                                            // set basePath of ace
                                            ace.config.set('basePath', cdn);

                                            // set base height
                                            taBase.height(taBase.height());

                                            // detect mode
                                            mode = ace.require('ace/ext/modelist').getModeForPath('/' + self.file.name).name;
                                            if (mode === 'text') {
                                                if (mimeMode[self.file.mime]) {
                                                    mode = mimeMode[self.file.mime];
                                                }
                                            }

                                            // show MIME:mode in title bar
                                            taBase.prev().children('.elfinder-dialog-title').append(' (' + self.file.mime + ' : ' + mode.split(/[\/\\]/).pop() + ')');
                                            // TextArea button and Setting button
                                            $('<div class="ui - dialog - buttonset "/>').css('float', 'left')
                                                .append(
                                                    $('<button>文本框</button>')
                                                        .button()
                                                        .on('click', function(){
                                                            if (ta.data('ace')) {
                                                                ta.removeData('ace');
                                                                editorBase.hide();
                                                                ta.val(editor.session.getValue()).show().focus();
                                                                $(this).text('编辑器');
                                                            } else {
                                                                ta.data('ace', true);
                                                                editorBase.show();
                                                                editor.setValue(ta.hide().val(), -1);
                                                                editor.focus();
                                                                $(this).text('文本框');
                                                            }
                                                        })
                                                )
                                                .append(
                                                    $('<button>Ace editor setting</button>')
                                                        .button({
                                                            icons: {
                                                                primary: 'ui-icon-gear',
                                                                secondary: 'ui-icon-triangle-1-e'
                                                            },
                                                            text: false
                                                        })
                                                        .on('click', function(){
                                                            editor.showSettingsMenu();
                                                        })
                                                )
                                                .prependTo(taBase.next());

                                            // Base node of Ace editor
                                            editorBase = $('<div id="'+id+'" style="width: 100 % ;
height: 100 % ;
"/>').text(ta.val()).insertBefore(ta.hide());

                                            // Ace editor configure
                                            ta.data('ace', true);
                                            editor = ace.edit(id);
                                            ace.require('ace/ext/language_tools');
                                            ace.require('ace/ext/settings_menu').init(editor);
                                            editor.$blockScrolling = Infinity;
                                            editor.setOptions({
                                                theme: 'ace/theme/dawn',
                                                mode: 'ace/mode/' + mode,
                                                fontSize: '14px',
                                                wrap: true,
                                                enableBasicAutocompletion: true,
                                                enableSnippets: true,
                                                enableLiveAutocompletion: true
                                            });

                                            editor.commands.addCommand({
                                                name : "saveFile ",
                                                bindKey: {
                                                    win : 'Ctrl-s',
                                                    mac : 'Command-s'
                                                },
                                                exec: function(editor) {
                                                    self.doSave();
                                                }
                                            });

                                            editor.commands.addCommand({
                                                name : "closeEditor ",
                                                bindKey: {
                                                    win : 'Ctrl-w|Ctrl-q',
                                                    mac : 'Command-w|Command-q'
                                                },

                                                exec: function(editor) {
                                                    self.doCancel();
                                                }

                                            });

                                            editor.resize();

                                            dfrd.resolve(editor);

                                        };

                                    // init & start

                                    init();

                                    return dfrd;
                                },

                                close : function(textarea, instance) {
                                    if (instance) {
                                        instance.destroy();
                                        $(textarea).show();
                                    }
                                },

                                save : function(textarea, instance) {
                                    instance && $(textarea).data('ace') && (textarea.value = instance.session.getValue());
                                },

                                focus : function(textarea, instance) {
                                    instance && $(textarea).data('ace') && instance.focus();
                                },

                                resize : function(textarea, instance, e, data) {
                                    instance && instance.resize();
                                }

                            }

                        ]

                    },

                    quicklook : {
                        // to enable preview with Google Docs Viewer
                        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']
                    }

                }
            });
        };
    </script>

小结

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

源码：

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

在线演示地址：https://cloud.52itstyle.vip

文章目录
  1. 1. 前言
  2. 2. 环境搭建
  3. 3. 项目截图
  4. 4. 项目功能
  5. 5. 项目配置
  6. 6. 小结