QiYuAdmin-结合FastDFS实现bootstrap-fileinput上传

简介

之前做过webuploader，总感觉webuploader里面的东西比较多，官网提供的例子很繁琐，其实我们的项目也在用webuploader，可能也是审美疲劳了，所以一直徘徊是用webuploader还是zyuploader？但zyuploader连个官方网站都没有，所以也是我担心的出现一些棘手的问题可能解决起来就比较麻烦，正在纠结这个问题的时候，我突然想到，难道bootstrap就没有上传下载的插件吗？百度一下，果然让我看到了bootstrap-fileinput，虽然文档不是很多，但至少用的人还是蛮多的，而且看起来比webuploader要好看一点，用起来也比较方便于是乎：

1. 成果预览

2. Bootstrap-fileinput加入和样式微调

3. Bootstrap-fileinput和后台集成（SpringBoot和Fastdfs）

成果预览

点击上传按钮



上传成功

Bootstrap-fileinput加入和样式微调

接下来就介绍一下怎么集成进来的。

一、首先下载bootstrap-fileinput，放入plugins目录下面。



二、加入相关js和css文件





三、需要一个input输入框

<input id="imgUpload" name="file" multiple="multiple" type="file" class="file-loading" accept=".png,.gif,.jpg" />

1


1
记住了一定别忘了name=file，我就是忘记写了，后台获取的总是null。比较郁闷。

四、初始化bootstrap-inputfile

$inputDom
.fileinput({
language: 'zh',
uploadUrl: uploadAjaxUrl,
autoReplace: true,
maxFileCount: 1,
maxFileSize : 2000,
uploadAsync: true,
enctype: 'multipart/form-data',
dropZoneTitle:"可以拖拽头像到这里,快到碗里来!!!",
allowedFileExtensions: ["jpg", "png", "gif"],
browseClass: "btn green btn-outline sbold", //按钮样式
removeClass:"btn red btn-outline sbold",
uploadClass:"btn purple btn-outline sbold",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
})
.on("fileuploaded", function (e, data) {
var res = data.response;
if (res.success==true) {
QiYuComponents.bootstrapSweetAlert("",res.msg,"success");
}
else {
QiYuComponents.bootstrapSweetAlert("",res.msg,"error");
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
五、样式微调了一下

在上面的初始化代码里面有几个参数，如下所示，覆盖了他们的默认样式：

browseClass: "btn green btn-outline sbold", //按钮样式
removeClass:"btn red btn-outline sbold",
uploadClass:"btn purple btn-outline sbold"

1
2
3


1
2
3



选中其中的一个按钮



除了用Metronic的样式覆盖他们的默认样式，我自己也把一些样式给改了，如下所示线条的颜色，文字的颜色。

/*bootstrap-input样式微调开始*/
.file-drop-zone{
border:1px dashed #36C6D3;
}
.file-preview{
border:1px solid #eee;
}
.kv-fileinput-caption{
border:1px solid #eee;
}
.file-caption-name{
color:#32c5d2;
}
/*bootstrap-input样式微调结束*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14


1
2
3
4
5
6
7
8
9
10
11
12
13
14

与后台集成（SpringBoot和Fastdfs）

我为上传新建了一个模块，我感觉以后用到的还有下载，excel、word等等功能。



一、Pom文件的配置

<dependency>
<groupId>org.csource</groupId>
<artifactId>fastdfs-client-java</artifactId>
<version>1.25</version>
</dependency>

1
2
3
4
5


1
2
3
4
5
版本号为1.25，貌似maven中央仓库没有了。我是直接下载的jar包，然后直接放入了我的maven本地仓库的，我给上传到了百度云了。
fastdfs-client-java-1.25.jar

一、Controller代码

/**
* 文件处理控制器:包括上传、下载,主要是调用fastdfs的api
*/
@Controller
@RequestMapping(value = "/fastdfs")
public class UploaderController {
@Resource(name = "uploaderService")
private UploaderService uploaderService;
/**
* 上传头像
* @param file
* @return
* @throws Exception
*/
@RequestMapping(value = "/upload/photo")
@ResponseBody
public Object uploadFile(@RequestParam(value="file") MultipartFile file) throws Exception {
if (HelpUtils.isNotEmpty(file) && !file.isEmpty()) {
String fileName = file.getOriginalFilename();//获取文件的名字
String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);//获取文件后缀名

String path = uploaderService.uploadFile(file.getBytes(), prefix);//返回存储的路径
//还有插入数据库的动作，代码还需要优化，此处先这样，不过可以上传成功了。他返回的是一个类似M00/00/00/xxxxxsssxxxxx.png这样的path，让你存入数据库的，用于访问和下载用的。

return QiYuUtil.getResponseJson("上传成功",true,null);
} else {
return QiYuUtil.getResponseJson("上传失败,附件为空",false,null);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
二、Service代码

/**
* 文件上传接口
*/
@Service("uploaderService")
public class UploaderServiceImpl implements UploaderService {

@Override
public String uploadFile(byte[] file_buff, String file_ext_name) throws Exception{
FastDFSClientUtils client = new FastDFSClientUtils("classpath:config/client.conf");
String uploadFile = client.uploadFile(file_buff, file_ext_name, null);
return uploadFile;
}

@Override
public int deleteFile(String groupName,String path) throws Exception{
FastDFSClientUtils client = new FastDFSClientUtils("classpath:config/client.conf");
int  deleteFile = client.deleteFile(groupName, path);
return deleteFile;
}
public byte[] downloadFile(String groupName,String path,String fileName)throws Exception{
FastDFSClientUtils client = new FastDFSClientUtils("classpath:config/client.conf");
byte[] b = client.downloadFile(groupName,path);
return b;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
上面有个配置文件的地址：classpath:config/client.conf，是需要你创建一个client.conf文件，里面直接放入fastdfs的tracker_server就可以了。

tracker_server=192.168.1.14:22122

三、FastDFSUtil提供了操作fastdfs的一些API，直接调用就可以了

/**
* fastdfs的封装后的api
*/
public class FastDFSClientUtils {
private TrackerClient trackerClient = null;
private TrackerServer trackerServer = null;
private StorageClient1 storageClient = null;
private StorageServer storageServer = null;

public FastDFSClientUtils(String conf) throws Exception {
if (conf.contains("classpath:")) {
conf = conf.replace("classpath:", this.getClass().getResource("/").getPath());
}
ClientGlobal.init(conf);
trackerClient = new TrackerClient();
trackerServer = trackerClient.getConnection();
storageServer = null;
storageClient = new StorageClient1(trackerServer, storageServer);

}

public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception {
String result = storageClient.upload_file1(fileName, extName, metas);
return result;
}
public String uploadFile(byte[] file_buff, String file_ext_name, NameValuePair[] meta_list) throws Exception {
String result = storageClient.upload_file1(file_buff, file_ext_name, meta_list);
return result;
}

public String uploadFile(String fileName) throws Exception {
String result = storageClient.upload_file1(fileName, null, null);
return result;
}

public String uploadFile(String fileName, String extName) throws Exception {
String result = storageClient.upload_file1(fileName, extName, null);
return result;
}
/*
* 文件删除的方法
* */
public int deleteFile(String groupName,String path)throws  Exception {
return  storageClient.delete_file(groupName, path);
}
/*
* 文件下载的方法
* */
public byte[] downloadFile(String groupName,String path) throws Exception{
return storageClient.download_file(groupName,path);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

结语

基本就是这样，代码我在优化一下，功能我也在完善一下，等我完善一些基础的功能，我给放到阿里云服务器上。

转自：山竹之七语：QiYuAdmin-SpringBoot之Shiro在线会话持久化