本文介绍了如何将bootstrap-fileinput与SpringBoot和FastDFS集成，用于文件上传功能。首先展示了成果预览，然后详细说明了集成步骤，包括引入组件、配置样式和与后台交互的代码示例。最后，作者计划进一步优化和完善功能。
简介
之前做过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" />记住了一定别忘了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");
}
})五、样式微调了一下
在上面的初始化代码里面有几个参数，如下所示，覆盖了他们的默认样式：
browseClass: "btn green btn-outline sbold", //按钮样式
removeClass:"btn red btn-outline sbold",
uploadClass:"btn purple btn-outline sbold"
选中其中的一个按钮
除了用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样式微调结束*/与后台集成（SpringBoot和Fastdfs）
我为上传新建了一个模块，我感觉以后用到的还有下载，excel、word等等功能。
一、Pom文件的配置
<dependency>
<groupId>org.csource</groupId>
<artifactId>fastdfs-client-java</artifactId>
<version>1.25</version>
</dependency>版本号为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);
}
}
}二、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;
}
}上面有个配置文件的地址：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);
}
}结语
基本就是这样，代码我在优化一下，功能我也在完善一下，等我完善一些基础的功能，我给放到阿里云服务器上。
扫一扫
2023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
