[有意思的代码] gomyck-fastdfs-spring-boot-starter: 完美集成fastDFS文件服务客户端, 支持断点续传, 分块上传, 文件秒传, 稳定的前后端组件(前端H5), 支持多用户并发上传文件校验(文件锁), 可以快速集成fastDFS文件服务, 免去繁琐的配置, 拿来即用, 目前暂时仅支持springboot开发环境

[](#%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8)开始使用

[](#%E5%BD%93%E5%89%8Dmaster%E4%B8%BA114-snapshot%E7%89%88%E6%9C%AC)当前MASTER为1.1.4-SNAPSHOT版本

如果使用 SNAPSHOT 版本 , 请勾选 develop-fastdfs

[](#%E4%B8%80%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE)一.环境配置

[](#1%E5%9C%A8pom%E6%96%87%E4%BB%B6%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%BE%9D%E8%B5%96)1.在pom文件中加入依赖:

<dependency>
<groupId>com.gomyck</groupId>
<artifactId>gomyck-fastdfs-spring-boot-starter</artifactId>
<version>1.1.3-RELEASE</version>
</dependency>

[](#2%E7%BC%96%E8%BE%91yml%E6%96%87%E4%BB%B6%E4%BB%A5%E4%B8%8B%E4%B8%BA%E5%85%A8%E9%87%8F%E9%85%8D%E7%BD%AE)2.编辑yml文件(以下为全量配置):

单个文件上传大小限制

spring:
servlet:
multipart:
max-file-size: 5000MB

fastdfs客户端配置

fdfs:
connect-timeout: 1601
thumb-image:
width: 150
height: 150
pool:
jmx-name-prefix: 1
jmx-name-base: 1
max-wait-millis: 102
tracker-list:
- 192.168.1.1:22122 #fastdfs服务地址
so-timeout: 1501
pool:
max-total: 153
gomyck:
config:
redis: true #是否使用redis存储文件上传信息以及上传锁
redis:
host: 127.0.0.1
password: xxxxx
port: 6379
fastdfs: #fastdfs上传配置
chunk-size: 5 #分块大小, 上传文件分块的大小 单位: MB
download-chunk-size: 100 #分块下载大小 单位: byte
group-id: group1 #fastdfs的组, 文件会被存到这个组下
file-server-protocol: http #远程文件服务连接协议
file-server-url: 192.168.1.196 #远程文件服务连接地址

[](#3%E5%9C%A8%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%98%A0%E5%B0%84%E8%A1%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%BB%A5%E4%B8%8B%E9%85%8D%E7%BD%AE%E5%8F%AF%E9%80%89-%E9%87%8D%E5%86%99resourcesstaticlocations%E6%97%B6%E8%A6%81%E6%A0%B9%E6%8D%AE%E5%AE%9E%E9%99%85%E9%85%8D%E7%BD%AE%E5%86%B3%E5%AE%9A%E6%98%AF%E5%90%A6%E5%8A%A0%E5%85%A5%E4%B8%8B%E8%BF%B0%E4%BB%A3%E7%A0%81)3.在静态资源映射表中加入以下配置(可选, 重写resources.staticLocations时要根据实际配置决定是否加入下述代码)

[](#%E8%AF%B7%E6%B3%A8%E6%84%8F-%E5%A6%82%E6%9E%9C%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%AD%98%E5%9C%A8-webmvcconfigurationsupport-%E5%AD%90%E7%B1%BB-%E9%82%A3%E4%B9%88%E5%BF%85%E9%A1%BB%E6%B7%BB%E5%8A%A0%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E9%85%8D%E7%BD%AE-%E5%90%A6%E5%88%99%E5%B0%86%E8%AF%B7%E6%B1%82%E4%B8%8D%E5%88%B0%E6%9C%AC%E9%A1%B9%E7%9B%AE%E8%B5%84%E6%BA%90)请注意, 如果你的项目中存在 WebMvcConfigurationSupport 子类, 那么必须添加静态资源配置, 否则将请求不到本项目资源

@Configuration
public class Config extends WebMvcConfigurationSupport {
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("ck-fastdfs/**").addResourceLocations("classpath:/META-INF/resources/ck-fastdfs/");
registry.addResourceHandler("ck-util/**").addResourceLocations("classpath:/META-INF/resources/ck-util/");
registry.addResourceHandler("ck-3pty/**").addResourceLocations("classpath:/META-INF/resources/ck-3pty/");
super.addResourceHandlers(registry);
}
}

[](#4%E5%90%AF%E5%8A%A8%E6%9C%8D%E5%8A%A1-%E8%AE%BF%E9%97%AE%E7%A4%BA%E4%BE%8B%E9%A1%B5%E9%9D%A2-hostportcontextpathck-fastdfsviewckfastdfshtml-%E5%8F%AF%E4%BB%A5%E6%B8%B2%E6%9F%93%E8%A1%A8%E7%A4%BA%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E6%88%90%E5%8A%9F)4.启动服务, 访问示例页面: host{:port}/{contextPath/}ck-fastdfs/view/ckFastDFS.html (可以渲染表示环境配置成功)

[](#%E4%BA%8C%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3)二.开发文档

本项目后端服务不在文档说明范围内, 高玩可以自行阅读修改, 只针对前端JS的使用做说明注释

[](#1%E5%9C%A8%E9%9C%80%E8%A6%81%E5%BC%80%E5%8F%91%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%9A%84%E9%A1%B5%E9%9D%A2%E4%BD%A0%E7%9A%84%E4%B8%9A%E5%8A%A1%E9%A1%B5%E9%9D%A2-%E5%BC%95%E5%85%A5js)1.在需要开发文件上传的页面(你的业务页面), 引入js:

{schema://}host{:port}{/contextPath}/ck-3pty/jquery/jquery-core.min.js
{schema://}host{:port}{/contextPath}/ck-fastdfs/js/webuploader.nolog.js
{schema://}host{:port}{/contextPath}/ck-fastdfs/js/ckFastDFS.js

[](#2%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3)2.开发文档

[](#1%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%89%8D%E7%AB%AF%E4%B8%8A%E4%BC%A0%E5%AE%9E%E4%BE%8B)1.实例化前端上传实例:

const option = {
//config something.....
};
const cfd = new CkFastDFS(option);

每个实例可以绑定多个上传按钮, 支持id选择器, 类选择器等jq插件支持的选择器类型

多实例存在的场景: 多个文件服务分组, 当不同的按钮上传文件到不同分组时, 可能需要页面多实例来处理

[](#2option%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E)2.option参数说明:

{
baseURI: "../../", //后端服务URI(包括上下文) (非必填)
fastDFSGroup: "group1", //文件上传至fastdfs的组名 (非必填)
uploaderConfig: {}, //webUploader配置 (非必填)
uploadButton: { //按钮配置 (必填)
buttonId: "#btn1", //选择器 (必填), 支持jq插件所支持的所有selector类型
multiple: true //是否允许多文件选择 (非必填, 默认false)
},
uploadProgressBar: { //进度条 (非必填)
changeBar: function (refer, file, progressVal) { //文件上传中, 进度改变时会触发该方法
console.log("进度条改变: " + refer + "|||" + file.id + "|||" + progressVal);
}
},
uploadListener: { //上传监听(非必填)

// 参数说明:
// refer:点击上传的按钮jq对象
// file:上传的文件
// result:后端服务返回的结果
// reason:错误类型, 通常为字符串: server

//添加文件信息
appendFileInfo: function (refer, file) {
console.log("选择文件: " + refer + "|||" + file.id);
},
//添加到上传队列之前
beforeAppendFileInQueued: function (refer, file) {
console.log("添加到队列之前: " + refer + "|||" + file.id);
return true;
},
//开始上传
beginUpload: function (refer, file) {
console.log("开始上传: " + refer + "|||" + file.id);
},
//分块上传成功
chunkUploadSuccess: function (refer, file, result) {
console.log("分块上传成功:" + refer + "|||" + file.id + "|||" + JSON.stringify(result))
},
//上传出错
uploadError: function (refer, file, reason) {
console.log("上传失败: " + refer + "|||" + file.id + "|||" + reason);
},
//上传成功
uploadSuccess: function (refer, file, result) {
console.log("上传成功: " + refer + "|||" + file.id + "|||" + JSON.stringify(result));
},
//上传完成(不管上传成功失败, 都会触发该方法)
uploadComplete: function (refer, file) {
console.log("上传完成: " + refer + "|||" + file.id);
},
//全局错误
error: function (type, tips) {
console.log("全局错误: " + type + "|||" + tips)
}
}
}

[](#3%E5%AE%9E%E4%BE%8B%E5%87%BD%E6%95%B0%E8%AF%B4%E6%98%8E)3.实例函数说明:

cfd.addButton(selector); //向实例中添加按钮
cfd.pauseUpload(param); //暂停上传 param 为布尔值时, 为暂停正在上传的文件, file类型时, 暂停指定file的上传, null|undefined时为全部暂停
cfd.cancleUpload(file); //取消指定文件的上传

[](#4%E5%85%B6%E4%BB%96%E8%AF%B4%E6%98%8E)4.其他说明

  1. 如何在自己的项目中添加fastdfs客户端实例:

    使用@Autowired即可注入以下接口实例

    TrackerClient - TrackerServer接口

    GenerateStorageClient - 一般文件存储接口 (StorageServer接口)

    FastFileStorageClient - 为方便项目开发集成的简单接口(StorageServer接口)

    AppendFileStorageClient - 支持文件续传操作的接口 (StorageServer接口)

  2. 如何扩展前端js:

    请参考类:CkFastDFS.js

    请参考webUploader官网API

    当然, 你也可以fork master分支代码, 打包后供他人使用(修改后的分支代码, pom文件中的parent请删掉, 并手动指定依赖版本, 否则可能会出现版本不一致问题)

[](#102-release%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0)1.0.2-Release版本实现:

  1. 分块下载(服务端分块写到客户端, 不必等所有文件都加载到服务端内存中在一次性写出)
  2. 断点续传前后端校验(历史上传的块与本次上传的块大小是否一致, 否则会导致修改块大小配置导致上传文件有问题)

[](#113-release%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0)1.1.3-Release版本实现:

  1. 调整了一些方法, 有些列表可以分页查询了
  2. 调整了文件在 redis 中的存储方式
  3. 增加了错误页面, 具体使用 看源代码
  4. 修复了一个小 BUG, 该 BUG 可能导致 redis 连接得不到正确释放
  5. 新增了略缩图, 具体使用方式看代码, 图片上传之后默认生成略缩图
  6. 新增了文件过期时间, 默认不失效, 请看 js 代码配置(例子)
  7. 打包下载优化
  8. new version new life

[](#%E4%B8%8B%E4%B8%80%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0)下一版本实现:

  1. 文件下载防盗链实现(基于当前服务访问文件)
  2. fastdfs token获取(直连文件服务访问文件)
    ......

原网址: 访问
创建于: 2021-03-03 11:23:58
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论