记一次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校验  等功能，等功能上来后再为大家更新

记一次SpringBoot使用WebUploader的坑的相关教程结束。