文件上传webuploader

2020-12-28

webuploader大文件分片并发上传

一、引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS。需前往官网自行下载！

地址：http://fex.baidu.com/webuploader/

图1：引入 Web Uploader资源

二、HTML及css部分

1、在HTML或jsp页面放置文件信息所需的容器、选择按钮、上传按钮和上传进度条四个部分

<div id="uploader" class="wu-example">
         <!-- 用来存放文件信息 -->
       <div id="thelist" class="uploader-list" style="width: 500px;"></div>
           <div class="btns">
               <div id="picker">选择文件</div>
           </div>
       </div>
	</div>
    <!--进度条-->
<div class="progress">
       <div id="progress_msg" class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                0%
       </div>
</div>

三、js部分

3.1、初始化WebUploader

<script type="text/javascript">

	var uploader = WebUploader.create({  
        auto : true,   // 选完文件后，是否自动上传
        server : getRootPath()+"/webuploader/course_upload",
        // 文件接收服务端(对应controller层方法)
        pick : '#picker',         // 选择文件的按钮。可选chunked : true,         
        //开启分片上传
        chunkSize : 5 * 1024 * 1024,//5M
        chunkRetry : 3,         //错误重试次数
    });

3.2、监听分块上传过程中的时间点

var md5File; //定义分片上传加密的文件变量

//监听分块上传过程中的时间点
	WebUploader.Uploader.register({
		"before-send-file" : "beforeSendFile",  // 整个文件上传前
		"before-send" : "beforeSend",           // 每个分片上传前
		"after-send-file" : "afterSendFile"  	// 分片上传完毕
    },   //未结束！接着下页代码

3.2.1 上传文件查重

//时间点1：所有分块进行上传之前调用此函数 ，检查文件存不存在
	 beforeSendFile : function(file) {
        var deferred = WebUploader.Deferred();
        md5File = hex_md5(file.name + file.size);
        //根据文件名称，大小确定文件唯一标记，这种方式不赞成使用
        $.ajax({
        	type : "POST",
        	url : getRootPath()+"/webuploader/ heckFile",
            //检验文件是否存在（对应controller层方法）
            data : {
            	//也可不使用md5File进行唯一性检测
            	//数据库表中任何字段都可进行唯一性检测 
            	//如：path : path(课程路径) 需自行修改controller传参 
            	md5File : md5File;  
                name : file.name,
             },
                async : false,      // 同步
                dataType : "json",
                success : function(response) {
                if (response) {                           
                    //文件存在，跳过 ，提示文件存在                            
                    $('#' + file.id).find('p.state').text("无需上传,文件已存在");
                } else {
                	deferred.resolve(); //文件不存在或不完整，发送该文件
                }
            }
            }, function(jqXHR, textStatus, errorThrown) { 
            	//任何形式的验证失败，都触发重新上传
            	deferred.resolve();
            });
            	return deferred.promise();
            },    //未结束！接着下页代码

3.2.2 判断分片是否存在

//时间点2：如果有分块上传，则每个分块上传之前调用此函数  ，判断分块存不存在
        beforeSend : function(block) {
            var deferred = WebUploader.Deferred();
            $.ajax({
                type : "POST",
                url : getRootPath()+"/webuploader/checkChunk",
                  //判断分块是否存在（对应controller层方法）
                data : {
                    md5File : md5File,             //文件唯一标记
                    chunk : block.chunk,        //当前分块下标
                },
                dataType : "json",
                success : function(response) {
                    if (response) {
                        deferred.reject();         //分片存在，跳过
                    } else {
                        deferred.resolve(); 
                         //分块不存在或不完整，重新发送该分块内容
                    }
                }
            }, function(jqXHR, textStatus, errorThrown) {
                   //任何形式的验证失败，都触发重新上传
                deferred.resolve();
            });
            return deferred.promise();
        },    //未结束，接着下页代码

3.2.3 合成分片

//时间点3：分片上传完成后，通知后台合成分片
        afterSendFile : function(file) {
            var chunksTotal = Math.ceil(file.size / (5 * 1024 * 1024));
            if (chunksTotal >= 1) {
                //合并请求
                var deferred = WebUploader.Deferred();
                $('#' + file.id).find('p.state').text('资源同步中,请稍后...');
                console.log("请稍后,资源同步中,请稍后...");
                $(".active").css("width",99.99+"%");
                $("#progress_msg").text(99.99+"%");
                $.ajax({
                    type : "POST",
                    url : getRootPath()+"/webuploader/merge",
		//合并分片（对应controller层方法）
                    data : {
                        name : file.name,
                        md5File : md5File,
                        chunks : chunksTotal,
			//此处示例传递直播房间号进行传参 可换成任意想传递的值
                        roomId : roomID,
                        wallpaper : downloadImg
                    },
                    cache : false,
                    async : true, 	// 异步 否则会卡住
                    dataType : "json",
                    success : function(response) {
                        if (response) {
                            console.log("同步完成");
                            $('#' + file.id).find('p.state').text(
                                '上传完成');
                            $('#' + file.id).find('.progress')
                                .fadeOut();
                            $(".active").css("width",100+"%");
                            $("#progress_msg").text(100+"%");
                        } else {
                            console.log("同步失败");
                            $('#' + file.id).find('p.state').text(
                                '上传失败');
                            deferred.reject();
                            $(".active").css("width",0+"%");
                            $("#progress_msg").text(0+"%");
                        }
                    }
                })
                return deferred.promise();
            }
        }
    });	//分片代码结束

3.2.4 webuploader监听事件

//上传添加参数
    uploader.on('uploadBeforeSend', function(obj, data, headers) {
        data.md5File = md5File;
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function(file) {
        $("#picker").hide();//隐藏上传框
        $("#thelist").append(
            '<div id="' + file.id + '" class="item">'
            + '<h4 class="info">' + file.name + '</h4>'
            + '<p class="state"></p>' + '</div>');
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function(file, percentage) {
        var temp = (percentage * 100).toFixed(2);
        $('#' + file.id).find('p.state').text('上传中请稍后...');
        console.log("进度条:", (percentage * 100).toFixed(2) + '%');
        $(".active").css("width",temp+"%");
        $("#progress_msg").text(temp+"%");
    });

<script>

四、js三个时间点的分片所对应的controller方法

4.1 所需成员变量

bll为上传对象的service层可修改

如：上传课程视频对应 video表的service层 videoBll及打印日志所需对象

@Resource(name = "bEnclosure")
    private IEnclosure bll;

    private String logType = "[webuploader]-->";

    private static Logger logger= LogManager.getLogger(LogManager.ROOT_LOGGER_NAME);

4.2 时间点1：检查文件存在与否

/**
     * @author van 检查文件存在与否
     */
    @PostMapping("checkFile")
    @ResponseBody
    public Boolean checkFile(@RequestParam(value = "md5File") String md5File) {
        System.out.println("文件md5:" + md5File);
        Map<String,Object> map = new HashMap();
        map.put("file_md5",md5File);
        Enclosure en = bll.findByFileMd5(map);
        if (en!=null){//说明文件已经存在
            System.out.println("文件已存在");
            return true;
        }
        return false;
    }

4.3 时间点2：检查分片存在与否

/**
     * @author van 检查分片存在与否
     */
    @PostMapping("checkChunk")
    @ResponseBody
public Boolean checkChunk(@RequestParam(value = "md5File") String md5File,@RequestParam(value = "chunk") Integer chunk, HttpServletRequest request) {
        Boolean exist = false;
        //String url =request.getSession().getServletContext().getRealPath("/").substring(0,2)+"/yf_updata_file/";
//上传视频所在的路径（可修改）
        String url = request.getSession().getServletContext().getRealPath("/upload/video/");

        String path = url + md5File + "/";// 分片存放目录
        String chunkName = chunk + ".tmp";// 分片名
        File file = new File(path + chunkName);
        if (file.exists()) {
            exist = true;
        }
        return exist;
}

4.4 时间点2：合成分片

/**
     * @author van (课程视频)合成分片
     */
    @PostMapping("course_merge")
    @ResponseBody
    public Boolean course_merge(@RequestParam(value = "chunks", required = false) Integer chunks,
                         @RequestParam(value = "md5File") String md5File,
                         @RequestParam(value = "name") String name,
                         @RequestParam(value = "videoId") String videoId,HttpServletRequest request)
            throws Exception {
	//上传视频所在的路径（可修改）
        String path = request.getSession().getServletContext().getRealPath("/upload/video/");
        FileOutputStream fileOutputStream = new FileOutputStream(path + name); 	// 合成后的文件
        try {
            byte[] buf = new byte[1024 * 5];
            for (long i = 0; i < chunks; i++) {
                String chunkFile = i + ".tmp";
                File file = new File(path + "/" + md5File + "/" + chunkFile);
                InputStream inputStream = new FileInputStream(file);
                int len = 0;
                while ((len = inputStream.read(buf)) != -1) {
                    fileOutputStream.write(buf, 0, len);
                    fileOutputStream.flush();
                }
                inputStream.close();
            }
            // 合并完，要删除md5目录及临时文件，节省空间。这里代码省略
            System.out.println("文件夹删除:" + path + "/" + md5File);
            deleteDir(new File(path + md5File));
		//示例为修改课程视频下的路径 所以在这传递了视频id和视频路径进行edit（修改）可修改
            Video video=new Video();
            video.setId(videoId);
            video.setPath("upload/image/"+name);
            videoBll.edit(video);
        } catch (Exception e) {
            logger.error(logType+"文件合并,添加至数据库失败"+e.getMessage(),e);
            return false;
        } finally {
            fileOutputStream.close();
        }
        return true;
    }

4.5文件传输

这里根据文件**md5**值生成目录，并将分片文件放到该目录下

/**
         * @author van 上传，这里根据文件md5值生成目录，并将分片文件放到该目录下
         */
        @PostMapping("upload")
        @ResponseBody
        public Boolean upload(@RequestParam(value = "file") MultipartFile file,
                @RequestParam(value = "md5File") String md5File,
                @RequestParam(value = "chunk", required = false) Integer chunk, HttpServletRequest request) { // 第几片，从0开始
            //String url =request.getSession().getServletContext().getRealPath("/").substring(0,2)+"/yf_updata_file/";
		//上传视频所在的路径（可修改）
            String url = request.getSession().getServletContext().getRealPath("/upload/video/");
            String path = url + md5File + "/";// 分片存放目录
            File dirfile = new File(path);
            if (!dirfile.exists()) {// 目录不存在，创建目录
                dirfile.mkdirs();
            }
            String chunkName;
            if (chunk == null) {// 表示是小文件，还没有一片
                chunkName = "0.tmp";
            } else {
                chunkName = chunk + ".tmp";
            }
            String filePath = path + chunkName;
            File savefile = new File(filePath);
            try {
                if (!savefile.exists()) {
                    savefile.createNewFile();// 文件不存在，则创建
                }
                file.transferTo(savefile);// 将文件保存
            } catch (IOException e) {
                return false;
            }
            return true;
		}

4.6递归删除目录下的所有文件及子目录下所有文件

private boolean deleteDir(File dir) {
       if (dir.isDirectory()) {
           String[] children = dir.list();
           //递归删除目录中的子目录下
           for (int i = 0; i < children.length; i++) {
               boolean success = deleteDir(new File(dir, children[i]));
               if (!success) {
                   return false;
               }
           }
       }
       // 目录此时为空，可以删除
       return dir.delete();
   }