记一次SpringBoot使用WebUploader的坑

Posted hackxiyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记一次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的坑的主要内容,如果未能解决你的问题,请参考以下文章

记一次Weblogic发布Springboot遇到的坑

记一次Springboot启动异常

记一次docker springboot无法访问

记一次springboot访问linux的mysql数据库

记一次SpringBoot 开发中所遇到的坑和解决方法

记一次springboot @Value注解无法注入配置文件的错误