webuploader分片上传（前后端分离）

功能描述

1、webuploader是百度研发的上传组件，文档不是特别规整，但是也够用了。

2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。

3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。

4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。

5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；

显示效果

关键代码

前端

WebUploader.Uploader.register({
            'name': 'webUploaderHookCommand',
            'before-send-file': 'beforeSendFile',
            "before-send": "beforeSend"
        }, {
            beforeSendFile: function(file) {
                var task = new WebUploader.Deferred();
                fileName = file.name;
                fileSize = file.size;
                (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function(percentage) {}).then(function(val) {
                    fileMd5 = val;
                    var url = checkUrl;
                    var data = {
                        type: 0,
                        fileName: fileName,
                        fileMd5: fileMd5,
                        fileSize: fileSize
                    };
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: data,
                        cache: false,
                        async: false, // 同步
                        timeout: 1000, // todo 超时的话，只能认为该分片未上传过
                        dataType: "json",
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            file.statusText = 'server_error';
                            task.reject();
                        }
                    }).then(function(data, textStatus, jqXHR) {
                        if(data.rtn == 0) {
                            if(data.obj == 1) {
                                file.statusText = 'file_existed';
                                task.reject();
                            } else {
                                task.resolve();
                            }
                        } else {
                            task.reject();
                        }
                    });
                });
                return task.promise();
            },
            beforeSend: function(block) {
                var task = new WebUploader.Deferred();
                var url = checkUrl;
                var data = {
                    type: 1,
                    fileName: fileName,
                    fileMd5: fileMd5,
                    chunk: block.chunk,
                    fileSize: block.end - block.start
                };
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    cache: false,
                    async: false, // 同步
                    timeout: 1000, // todo 超时的话，只能认为该分片未上传过
                    dataType: "json"
                }).then(function(data, textStatus, jqXHR) {
                    if(data.rtn == 0 && data.obj == 1) {
                        task.reject(); // 分片存在，则跳过上传
                    } else {
                        task.resolve();
                    }
                });
                this.owner.options.formData.fileMd5 = fileMd5;
                this.owner.options.formData.chunkSize = chunkSize;
                return task.promise();
            }
        });

        // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择文件'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea', //指定文件拖拽的区域
            paste: '#uploader', //指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
            swf: '../plugins/webuploader/Uploader.swf',
            chunked: true,
            chunkSize: chunkSize,
            chunkRetry: false,
            threads: 1,
            server: uploadUrl,
            // runtimeOrder: 'flash',

            // accept: {
            //     title: 'Images',
            //     extensions: 'gif,jpg,jpeg,bmp,png',
            //     mimeTypes: 'image/*'
            // },
            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300 //限制多文件上传的个数
            //fileSizeLimit: 200 * 1024 * 1024, // 限制所有文件的大小 200 M
            //fileSingleSizeLimit: 50 * 1024 * 1024 // 限制单个文件的大小 50 M
        });

后端

import java.io.File;
import java.io.IOException;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.bear.upload.util.FileUtil;
import com.bear.upload.util.RETURN;
import com.bear.upload.vo.CheckMd5FileVO;
import com.bear.upload.vo.UploadVO;

@Service
public class ChunkUploadService {

    private static Logger LOG = LoggerFactory.getLogger(ChunkUploadService.class);

    @Value("${file.upload.path}")
    private String UPLOAD_PATH;

    private static final String Delimiter = "-";

    /**
     * 上传之前校验(整个文件、分片)
     *
     * @param md5FileVO
     * @return
     */
    public Object check(CheckMd5FileVO md5FileVO) {
        Integer type = md5FileVO.getType();
        Long chunk = md5FileVO.getChunk();
        String fileName = md5FileVO.getFileName();
        Long fileSize = md5FileVO.getFileSize();
        if (type == 0) {// 未分片校验
            String destfilePath = UPLOAD_PATH + File.separator + fileName;
            File destFile = new File(destfilePath);
            if (destFile.exists() && destFile.length() == fileSize) {
                return RETURN.success("文件已存在，跳过", 1);
            } else {
                return RETURN.success("文件不存在", 0);
            }
        } else {// 分片校验
            String fileMd5 = md5FileVO.getFileMd5();
            String destFileDir = UPLOAD_PATH + File.separator + fileMd5;
            String destFileName = chunk + Delimiter + fileName;
            String destFilePath = destFileDir + File.separator + destFileName;
            File destFile = new File(destFilePath);
            if (destFile.exists() && destFile.length() == fileSize) {
                return RETURN.success("分片已存在，跳过", 1);
            } else {
                return RETURN.success("分片不存在", 0);
            }
        }
    }

    /**
     * 文件上传
     *
     * @param file
     * @param uploadVO
     * @param appVersion
     * @return
     */
    public Object upload(MultipartFile file, UploadVO uploadVO) {
        Long chunk = uploadVO.getChunk();
        if (chunk == null) {// 没有分片
            return UnChunkUpload(file, uploadVO);
        } else {// 分片
            return ChunkUpload(file, uploadVO);
        }
    }

    /**
     * 分片上传
     *
     * @param file
     * @param uploadVO
     * @param appVersion
     * @return
     */
    public Object ChunkUpload(MultipartFile file, UploadVO uploadVO) {
        String fileName = uploadVO.getName();
        String fileMd5 = uploadVO.getFileMd5();
        Long chunk = uploadVO.getChunk();// 当前片
        Long chunks = uploadVO.getChunks();// 总共多少片

        // 分片目录创建
        String chunkDirPath = UPLOAD_PATH + File.separator + fileMd5;
        File chunkDir = new File(chunkDirPath);
        if (!chunkDir.exists()) {
            chunkDir.mkdirs();
        }
        // 分片文件上传
        String chunkFileName = chunk + Delimiter + fileName;
        String chunkFilePath = chunkDir + File.separator + chunkFileName;
        File chunkFile = new File(chunkFilePath);
        try {
            file.transferTo(chunkFile);
        } catch (Exception e) {
            LOG.error("分片上传出错", e);
            return RETURN.fail("分片上传出错", 1);
        }
        // 合并分片
        Long chunkSize = uploadVO.getChunkSize();
        long seek = chunkSize * chunk;
        String destFilePath = UPLOAD_PATH + File.separator + fileName;
        File destFile = new File(destFilePath);
        if (chunkFile.length() > 0) {
            try {
                FileUtil.randomAccessFile(chunkFile, destFile, seek);
            } catch (IOException e) {
                LOG.error("分片{}合并失败：{}", chunkFile.getName(), e.getMessage());
                return RETURN.fail("分片合并失败", 1);
            }
        }
        if (chunk == chunks - 1) {
            // 删除分片文件夹
            FileUtil.deleteDirectory(chunkDirPath);

            return RETURN.success("上传成功", 1);
        } else {
            return RETURN.fail("上传中...", 1);
        }
    }

    /**
     * 未分片上传
     *
     * @param file
     * @param uploadVO
     * @param appVersion
     * @return
     */
    public Object UnChunkUpload(MultipartFile file, UploadVO uploadVO) {
        String fileName = uploadVO.getName();
        // String fileMd5 = uploadVO.getFileMd5();
        // 文件上传
        File destFile = new File(UPLOAD_PATH + File.separator + fileName);
        if (file != null && !file.isEmpty()) {
            // 上传目录
            File fileDir = new File(UPLOAD_PATH);
            if (!fileDir.exists()) {
                fileDir.mkdirs();
            }
            if (destFile.exists()) {
                destFile.delete();
            }
            try {
                file.transferTo(destFile);
                return RETURN.success("上传成功", 0);
            } catch (Exception e) {
                LOG.error("文件上传出错", e);
                return RETURN.fail("文件上传出错", 0);
            }
        }
        return RETURN.fail("上传失败", 0);
    }
}

需要完整代码加QQ群，有问题参与讨论：616697860