FastDFS---基礎上手

分享一下FastDFS的簡單上手的demo,挺簡單的.其中文件上傳流程大致如下:


controller裏的上傳方法:

 @RequestMapping("/fastdfs/upload")
    @ResponseBody
    public String uploadCreditorInfo(@RequestParam("id") Integer id, @RequestParam("fileName") MultipartFile file){
        int status = -1;

        //文件擴展名
        //originalFilename得到的文件名:aaa.txt
        String originalFilename = file.getOriginalFilename();
        String fileExtName = originalFilename.substring(originalFilename.indexOf(".")+1);
       
        try {
            //將文件轉換爲字節數組
            byte[] fileBatys  = file.getBytes();
            //調用service上傳方法
            status =  creditorInfoService.uploadCreditorInfo(id,fileBatys,fileExtName);
        } catch (IOException e) {
            e.printStackTrace();
        }


        return  "<script>window.parent.uploadOK("+status+")</script>";
    }
service裏的上傳方法:

public int uploadCreditorInfo(Integer id,byte[] fileBatys, String exName) {
        int retCode = 10000;
        String[] arry=null;
       
            //上傳
            if ( exName != null && exName.length()>0) {

                arry = FastDFSClient.uploadFile(fileBatys,exName);
                //更新數據庫信息
                String contracturl = "http://192.168.174.129/" + arry[0] + "/" + arry[1];
                CreditorInfo creditorInfo = new CreditorInfo();
                creditorInfo.setContracturl(contracturl);
                creditorInfo.setGroups(arry[0]);
                creditorInfo.setPath(arry[1]);
                creditorInfo.setId(id);

                retCode = creditorInfoMapper.updateByPrimaryKeySelective(creditorInfo);
            }

        return retCode;
    }
其中service中調用的fastdfs的uploadFile()方法如下:(這也是使用fastdfs的核心部分)

 /**
     * 文件上傳
     *
     * @param fileBytes
     * @param fileExtName
     * @return
     */
    public static String[] uploadFile (byte[] fileBytes, String fileExtName) {
        TrackerServer trackerServer = null;
        StorageServer storageServer = null;
        String[] array = null;
        try {

            //1.初始化fastdfs的連接信息配置
            ClientGlobal.init("fastdfs.properties");

            //2.創建一個Tracker的客戶端對象
            TrackerClient trackerClient = new TrackerClient();

            //3.獲得一個Tracker server對象
            trackerServer = trackerClient.getConnection();

            //4.獲得一個Storage server對象
            storageServer = trackerClient.getStoreStorage(trackerServer);

            //5.創建一個Storage客戶端對象
            StorageClient storageClient = new StorageClient(trackerServer, storageServer);

            //6.通過storageClient客戶端對象,就可以去操作fastdfs文件系統了

            //文件上傳
            array = storageClient.upload_file(fileBytes, fileExtName, null);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (MyException e) {
            e.printStackTrace();
        } finally {
            try {
                if (null != trackerServer) {
                    trackerServer.close();
                }
                if (null != storageServer) {
                    storageServer.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return array;
    }
剩下的就是頁面展示了,可以根據自己的習慣,使用ajax或者其他的前端技術,這裏嘗試了新的技術,沒有使用ajax.具體代碼如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FastDFS---Demo</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>


<body style="margin: 50px;">

<form action="${pageContext.request.contextPath}/fastdfs/upload" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" target="uploadFrame">
    <div class="form-group">
        <label class="col-sm-2 control-label">借款人真實姓名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="realname" name="realname" value="${creditorInfo.realname}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">借款人手機號</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="phone" name="phone" value="${creditorInfo.phone}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">借款人身份證</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="idCard" name="idCard" value="${creditorInfo.idCard}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">借款人性別</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="sex" name="sex" value="${creditorInfo.sex==1?"男":"女"}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">借款人地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="address" name="address" value="${creditorInfo.address}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">上傳合同</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" id="fileName" name="fileName">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="hidden" class="form-control" id="id" name="id" value="${creditorInfo.id}">
            <button type="submit" class="btn btn-default">提 交</button>
        </div>
    </div>
    <%--頁面不刷新上傳文件,借鑑一個iframe--%>
    <iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>
</form>

<%--上傳後結果返回頁面展示--%>
<script type="text/javascript">
    function uploadOK(status) {
        alert(status)
        if (status == 1) {
            //文件上傳成功 layer彈層
            layer.confirm('文件上傳成功,是否需要跳轉到列表頁?', function(index){
                //do something
                window.location.href="${pageContext.request.contextPath}/fastdfs/index"
                layer.close(index);
            });
        } else {
            //文件上傳失敗
            layer.alert("Sorry,文件上傳失敗了")
        }
    }
</script>

<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
</body>

</body>
</html>
需要注意的是
<iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>

這段代碼需要同表格一起提交,它與表格頭部信息其實是一一對應的,就是表單頭信息裏的target="uploadFrame".如果編寫時沒有將下面這段代碼加到表單裏一起提交,那麼頁面是跳轉不了的,.

<form action="${pageContext.request.contextPath}/fastdfs/upload" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" target="uploadFrame">
還有一點需要注意的是,因爲表單要提交本地文件,所以,務必記着在表單頭信息里加入enctype="multipart/form-data",提交本地文件時要加的表單屬性.











發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章