記一次SpringBoot使用WebUploader的坑

問題：

　　B/S通常都會涉及到文件的上傳，普通文件上傳使用文件框，后台接收文件即可

　　我遇到的問題是要開發一個大文件上傳的功能，那就肯定要支持文件的分片

 

分析：

　　1.參考網上的資料后，通常的多文件和大文件上傳會用到三種框架

多文件上傳的插件常用的有：
1、jquery uploadify  下載【http://www.uploadify.com/download/】
2、jquery file upload 下載【https://github.com/blueimp/jQuery-File-Upload/tags】
3、webuploader 下載    【http://fex.baidu.com/webuploader/download.html】

　　2.最后我選的是百度開發的 【webuploader】，網上比較推崇

 

解決：

　　1.新建一個測試頁面，引入相關的樣式表css，js文件

　　　　注意，要首先引入jquery的js文件，我的頁面是嵌套的，首頁已經引入

　　　　引入文件清單：

　　　　　　@ bootstrap的css,js文件

　　　　　　@ 在【http://fex.baidu.com/webuploader/】這里下載webuploader的壓縮包，我這只是引入了

　　　　　　　　【webuploader.css】和【webuploader.js】

　　　　　　@ 引入自己的業務js文件

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/webuploader.css">

<!--官網例子-->
<!--<div id="uploader" class="wu-example">-->
    <!--&lt;!&ndash;用來存放文件信息&ndash;&gt;-->
    <!--<div id="thelist" class="uploader-list"></div>-->
    <!--<div class="btns">-->
        <!--<div id="picker">選擇文件</div>-->
        <!--<button id="ctlBtn" class="btn btn-default">開始上傳</button>-->
    <!--</div>-->
<!--</div>-->

<!--單文件-->
<div id="uploader" class="wu-example">
    <!--用來存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="attach"></div>
        <button id="upload" class="btn btn-default">開始上傳</button>
    </div>
</div>

<!--多文件-->
<!--<div id="uploader1" class="wu-example">-->
    <!--&lt;!&ndash;用來存放文件信息&ndash;&gt;-->
    <!--<div id="thelist1" class="uploader-list"></div>-->
    <!--<div class="btns">-->
        <!--<div id="multi"></div>-->
        <!--<input type="button" value="上傳" id="multiUpload"/>-->
    <!--</div>-->
<!--</div>-->

<!--引入JS-->
<script type="text/javascript" src="static/html/bigFileUpload/assets/webuploader.js"></script>
<script type="text/javascript" src="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="static/html/bigFileUpload/upload.js"></script>

　　2.編寫業務js文件

$(function(){

    var $list = $("#thelist");
    var uploader;
　　 // 初始化uploader
    uploader = WebUploader.create({
        auto:false, //不自動提交，需要點擊
        pick: {
            id: '#attach',
            label: '選擇文件',
        },
        server: 'test/save', //后台接收服務
        resize: false,
        formData: {"Authorization": localStorage.token}, //額外參數傳遞，可以沒有
        chunked: true, //分片
        chunkSize: 10 * 1024 * 1024, //分片大小指定
        threads:1, //線程數量
        disableGlobalDnd: true //禁用拖拽
    });

    //添加文件頁面提示
    uploader.on( "fileQueued", function( file ) {
        $list.html( "<div id='"+  file.id + "' class='item'>" +
            "<h4 class='info'>" + file.name + "</h4>" +
            "<p class='state'>等待上傳...</p>" +
            "</div>" );
    });

    //開進度條
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }
        $li.find('p.state').text('上傳中');
        $percent.css( 'width', percentage * 100 + '%' );
    });

    //上傳成功
    uploader.on( "uploadSuccess", function( file ) {
        $( "#"+file.id ).find("p.state").text("已上傳");
        $('#' + file.id).find('.progress').fadeOut();
    });

    //上傳失敗
    uploader.on( "uploadError", function( file ) {
        $( "#"+file.id ).find("p.state").text("上傳出錯");
        uploader.cancelFile(file);
        uploader.removeFile(file,true);
    });

    //點擊上傳
    $("#upload").on("click", function() {
        uploader.upload();
    })

});

　　3.編寫后台文件接收文件

package org.triber.portal.upload;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.util.HashMap;
import java.util.Map;

@Slf4j
@RestController
@RequestMapping(value = "/test", produces = MediaType.APPLICATION_JSON_VALUE)
public class UploadController {

    @Value("${AREA_FILE}")
    private String AREA_FILE;//excel下載文件名
    @Value("${AREA_DIR}")
    private String AREA_DIR;//excel臨時存儲文件夾

    /**
     * 上傳文件
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/save", produces = {"application/json"})
    public Map<String,String> importExcel(@RequestParam MultipartFile file) throws IOException {

        //獲取文件名
        String originalFilename = file.getOriginalFilename();

        //合並文件
        RandomAccessFile raFile = null;
        BufferedInputStream inputStream=null;
        try{
            File dirFile = new File(AREA_DIR, originalFilename);
            //以讀寫的方式打開目標文件
            raFile = new RandomAccessFile(dirFile, "rw");
            raFile.seek(raFile.length());
            inputStream = new BufferedInputStream(file.getInputStream());
            byte[] buf = new byte[1024];
            int length = 0;
            while ((length = inputStream.read(buf)) != -1) {
                raFile.write(buf, 0, length);
            }
        }catch(Exception e){
            throw new IOException(e.getMessage());
        }finally{
            try {
                if (inputStream != null) {
                    inputStream.close();
                }
                if (raFile != null) {
                    raFile.close();
                }
            }catch(Exception e){
                throw new IOException(e.getMessage());
            }
        }
　　　　　
　　　　　//以下信息沒用。比較扯淡 //初始化返回信息
        Map<String, String> map = new HashMap<String, String>();
        String result = "";
        int res = -1;
        //返回提示信息
        map.put("result", result);
        return map;
    }

}

 

總結：

　　說一下我遇到的問題吧，

　　網上查了好多資料，看了好多例子，可能例子業務要求高，設置一堆參數，最后發現還是官網靠譜，沒有沒用的東西，但是你單獨拷貝下來會出現無法運行的情況

　　額，最后拷貝精簡代碼，到最小可用，大家可以視情況而定

　　我使用的springBoot,后台在接收文件時為 【MultipartFile】

　　試了File來接受總是提示我不能接收，后來沒辦法。只能采用多文件類來接收

　　我寫的這個例子適用於單文件，而且文件比較大的情況

　　據說IE不能上傳4g之上的文件，現在沒有這個限制了，無論大小，切割后后台組裝即可

　　后期可能會再加  多文件，重復文件校驗，斷點續傳，塊MD5校驗  等功能，等功能上來后再為大家更新