记录: 百度webuploader 分片文件上传java服务器端（spring mvc）示例的优化

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近项目上用到文件分片上传，于是找到了百度的一个开源前端控件webuploader。于是尝试使用。

下载下来后，它提供的服务器端示例代码是php版的，那么Java版的呢？

其实，上传文件都是按照rfc1867标注来的，只是分段上传需要在前端多做点事情。分段上传原理其实就是在前端使用JavaScript对文件进行分割成不同小块，然后每次ajax请求就post一小块，直到全部收到为止。

但是，为了确保后端能判断文件是否完整的收到，需要得知当前是第几块，一共多少块，每个分段的大小是多少（前后端同学约定好吧），webuploader是有把这些参数传给后端，但文档里没说明参数名称啊，看了其他后端example，并且自己做了实验才知道。

参数：

name 文件名

chunks 一共有多少分片

chunk 当前分片是第几片file 文件对象

重点来了:后端接收到这些参数应该怎么处理？之前看过一个example ，是把每个分片文件都暂时存起来，命名为文件名.part_1, 文件名.part_2, 文件名.part_3...文件名part_n, 每次都从1到总分片个数(注:这个值就是chunks的值),
遍历这些文件是否存在.如果都存在说明全部上传完成了,则再循环一遍,把所有分段都合并到一个文件里. 这么做虽然是可以,但是如果文件很大, 最后一个分片到达的时候响应可能会很慢,效率低下.
那么应该怎么解决呢?考虑了一会, 联想到,以前使用迅雷之类的工具下载,除下载下来的文件以外,还会有一个额外的文件用来存放下载之类的信息.
受到这个启发, 我决定这么设计: 每当第n个分片到达时(注:n的值其实就是收到的chunk的值), 使用java的随机文件读写类RandomAccessFile, 定位到 n*分片大小(注:每个分片大小跟前端约定好的)的位置

long offset = chunkSize * param.getChunk();
//定位到该分片的偏移量
accessTmpFile.seek(offset);

然后写入分片内容.

//写入该分片数据
accessTmpFile.write(param.getFileItem().get());同时,往一个配置文件,暂且命名为文件名.conf 设置长度为chunks的值, 也就是分片个数.

accessConfFile.setLength(param.getChunks());

然后往第n个位置写入一个Byte.MAX_VALUE,

accessConfFile.seek(param.getChunk());
accessConfFile.write(Byte.MAX_VALUE);

因为写入的单位就是字节,所以我这么操作就相当于在第n个字节里写入全1的状态. 然后检查,从0到chunks开始每一个字节进行与操作, 一旦到第n个字节发现与运算的结果不是全1(Byte.MAX_VALUE)那么就说明这个文件的第n个部分没有传输完成.
如果conf文件0到chunks的位置全部进行与运算的最后结果还是Byte.MAX_VALUE,那么就说明这个文件已经传输完成,该干嘛就干嘛..

//completeList 检查是否全部完成,如果数组里是否全部都是(全部分片都成功上传)
byte[] completeList = FileUtils.readFileToByteArray(confFile);
byte isComplete = Byte.MAX_VALUE;
for (int i = 0; i < completeList.length && isComplete==Byte.MAX_VALUE; i++) {
//与运算, 如果有部分没有完成则 isComplete 不是 Byte.MAX_VALUE
isComplete = (byte)(isComplete & completeList[i]);
System.out.println(prefix + "check part " + i + " complete?:" + completeList[i]);
}if (isComplete == Byte.MAX_VALUE) {
System.out.println(prefix + "upload complete !!");
}

其实还有另一种想法是,前端传来该文件的md5码,然后后端每次接收到都算一次md5码,如果一致则说明上传成功,但是效率应该也不够上面的好,于是没实现. 谁有更好的想法可以留言哈.

现在可以开始例子：
在前端webuploader source的examples/image-upload/upload.js 中可以看到

// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
formData: {
uid: 123
},
dnd: '#dndArea',
paste: '#uploader',
swf: '../../dist/Uploader.swf',
chunked: false,
chunkSize: 512 * 1024,
server: '../../server/fileupload.php',
// 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
});