FastDFS---基础上手

阳光穿透心脏的1/2处 2022-05-31 00:07 198阅读 0赞

分享一下FastDFS的简单上手的demo,挺简单的.其中文件上传流程大致如下:

SouthEast

controller里的上传方法:

  1. @RequestMapping("/fastdfs/upload")
  2. @ResponseBody
  3. public String uploadCreditorInfo(@RequestParam("id") Integer id, @RequestParam("fileName") MultipartFile file){
  4. int status = -1;
  5. //文件扩展名
  6. //originalFilename得到的文件名:aaa.txt
  7. String originalFilename = file.getOriginalFilename();
  8. String fileExtName = originalFilename.substring(originalFilename.indexOf(".")+1);
  9. try {
  10. //将文件转换为字节数组
  11. byte[] fileBatys = file.getBytes();
  12. //调用service上传方法
  13. status = creditorInfoService.uploadCreditorInfo(id,fileBatys,fileExtName);
  14. } catch (IOException e) {
  15. e.printStackTrace();
  16. }
  17. return "<script>window.parent.uploadOK("+status+")</script>";
  18. }

service里的上传方法:

  1. public int uploadCreditorInfo(Integer id,byte[] fileBatys, String exName) {
  2. int retCode = 10000;
  3. String[] arry=null;
  4. //上传
  5. if ( exName != null && exName.length()>0) {
  6. arry = FastDFSClient.uploadFile(fileBatys,exName);
  7. //更新数据库信息
  8. String contracturl = "http://192.168.174.129/" + arry[0] + "/" + arry[1];
  9. CreditorInfo creditorInfo = new CreditorInfo();
  10. creditorInfo.setContracturl(contracturl);
  11. creditorInfo.setGroups(arry[0]);
  12. creditorInfo.setPath(arry[1]);
  13. creditorInfo.setId(id);
  14. retCode = creditorInfoMapper.updateByPrimaryKeySelective(creditorInfo);
  15. }
  16. return retCode;
  17. }

其中service中调用的fastdfs的uploadFile()方法如下:(这也是使用fastdfs的核心部分)

  1. /**
  2. * 文件上传
  3. *
  4. * @param fileBytes
  5. * @param fileExtName
  6. * @return
  7. */
  8. public static String[] uploadFile (byte[] fileBytes, String fileExtName) {
  9. TrackerServer trackerServer = null;
  10. StorageServer storageServer = null;
  11. String[] array = null;
  12. try {
  13. //1.初始化fastdfs的连接信息配置
  14. ClientGlobal.init("fastdfs.properties");
  15. //2.创建一个Tracker的客户端对象
  16. TrackerClient trackerClient = new TrackerClient();
  17. //3.获得一个Tracker server对象
  18. trackerServer = trackerClient.getConnection();
  19. //4.获得一个Storage server对象
  20. storageServer = trackerClient.getStoreStorage(trackerServer);
  21. //5.创建一个Storage客户端对象
  22. StorageClient storageClient = new StorageClient(trackerServer, storageServer);
  23. //6.通过storageClient客户端对象,就可以去操作fastdfs文件系统了
  24. //文件上传
  25. array = storageClient.upload_file(fileBytes, fileExtName, null);
  26. } catch (IOException e) {
  27. e.printStackTrace();
  28. } catch (MyException e) {
  29. e.printStackTrace();
  30. } finally {
  31. try {
  32. if (null != trackerServer) {
  33. trackerServer.close();
  34. }
  35. if (null != storageServer) {
  36. storageServer.close();
  37. }
  38. } catch (IOException e) {
  39. e.printStackTrace();
  40. }
  41. }
  42. return array;
  43. }

剩下的就是页面展示了,可以根据自己的习惯,使用ajax或者其他的前端技术,这里尝试了新的技术,没有使用ajax.具体代码如下:

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>FastDFS---Demo</title>
  8. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
  9. <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  10. <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  11. </head>
  12. <body style="margin: 50px;">
  13. <form action="${pageContext.request.contextPath}/fastdfs/upload" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" target="uploadFrame">
  14. <div class="form-group">
  15. <label class="col-sm-2 control-label">借款人真实姓名</label>
  16. <div class="col-sm-10">
  17. <input type="text" class="form-control" id="realname" name="realname" value="${creditorInfo.realname}">
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. <label class="col-sm-2 control-label">借款人手机号</label>
  22. <div class="col-sm-10">
  23. <input type="text" class="form-control" id="phone" name="phone" value="${creditorInfo.phone}">
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <label class="col-sm-2 control-label">借款人身份证</label>
  28. <div class="col-sm-10">
  29. <input type="text" class="form-control" id="idCard" name="idCard" value="${creditorInfo.idCard}">
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label class="col-sm-2 control-label">借款人性别</label>
  34. <div class="col-sm-10">
  35. <input type="text" class="form-control" id="sex" name="sex" value="${creditorInfo.sex==1?"":""}">
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <label class="col-sm-2 control-label">借款人地址</label>
  40. <div class="col-sm-10">
  41. <input type="text" class="form-control" id="address" name="address" value="${creditorInfo.address}">
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label class="col-sm-2 control-label">上传合同</label>
  46. <div class="col-sm-10">
  47. <input type="file" class="form-control" id="fileName" name="fileName">
  48. </div>
  49. </div>
  50. <div class="form-group">
  51. <div class="col-sm-offset-2 col-sm-10">
  52. <input type="hidden" class="form-control" id="id" name="id" value="${creditorInfo.id}">
  53. <button type="submit" class="btn btn-default">提 交</button>
  54. </div>
  55. </div>
  56. <%--页面不刷新上传文件,借鉴一个iframe--%>
  57. <iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>
  58. </form>
  59. <%--上传后结果返回页面展示--%>
  60. <script type="text/javascript">
  61. function uploadOK(status) {
  62. alert(status)
  63. if (status == 1) {
  64. //文件上传成功 layer弹层
  65. layer.confirm('文件上传成功,是否需要跳转到列表页?', function(index){
  66. //do something
  67. window.location.href="${pageContext.request.contextPath}/fastdfs/index"
  68. layer.close(index);
  69. });
  70. } else {
  71. //文件上传失败
  72. layer.alert("Sorry,文件上传失败了")
  73. }
  74. }
  75. </script>
  76. <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
  77. </body>
  78. </body>
  79. </html>

需要注意的是

  1. <iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>

这段代码需要同表格一起提交,它与表格头部信息其实是一一对应的,就是表单头信息里的target=”uploadFrame”.如果编写时没有将下面这段代码加到表单里一起提交,那么页面是跳转不了的,.

  1. <form action="${pageContext.request.contextPath}/fastdfs/upload" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" target="uploadFrame">

还有一点需要注意的是,因为表单要提交本地文件,所以,务必记着在表单头信息里加入enctype=”multipart/form-data”,提交本地文件时要加的表单属性.

发表评论

表情:
评论列表 (有 0 条评论,198人围观)

还没有评论,来说两句吧...

相关阅读

    相关 ES6 基础

    [ES6 基础][ES6] 一、新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不