课外知识----断点续传
1 文件不分块
客户端会记录当前服务器的已经上传文件的大小,等到下载网络连接成功,给服务器发生我已经上传文件的大小,并继续发生字节
服务器接收已经上传文件的大小,用这个大小来将移动文件的cursor,进行append
2 文件分块
客户端首先将需要上传的文件分块,网络恢复正常,已经上传的文件分块不在上传,上传失败的文件分块重新上传
服务器将接受到的文件分块进行合并
Web客户端实现断点上传功能
WebUploader
官网:fexteam.gz01.bdysite.com/webuploader/
http://fex.baidu.com/webuploader/
web
<template>
<div><br/>
操作步骤：<br/>
1、点击“选择文件”，选择要上传的文件<br/>
2、点击“开始上传”，开始上传文件<br/>
3、如需重新上传请重复上边的步骤。<br/><br/>
<div id="uploader" class="wu-example">
<div class="btns" style="float:left;padding-right: 20px">
<div id="picker">选择文件</div>
</div>
<div id="ctlBtn" class="webuploader-pick" @click="upload()">开始上传</div>
</div>
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list">
<div v-if="uploadFile.id" :id='uploadFile.id'><span>{{uploadFile.name}}</span> <span class='percentage'>{{percentage}}%</span>
</div>
</div>
</div>
</template>
<script>
import $ from '../../../../static/plugins/jquery/dist/jquery.js'
import webuploader from '../../../../static/plugins/webuploader/dist/webuploader.js'
import '../../../../static/css/webuploader/webuploader.css'
export default {
data() {
return {
uploader: {},
uploadFile: {},
percentage: 0,
fileMd5: ''
}
},
methods: {
//开始上传
upload() {
if (this.uploadFile && this.uploadFile.id) {
this.uploader.upload(this.uploadFile.id);
} else {
alert("请选择文件");
}
}
},
mounted() {
// var fileMd5;
// var uploadFile;
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile"
}, {
beforeSendFile: function (file) {
// 创建一个deffered,用于通知是否完成操作
var deferred = WebUploader.Deferred();
// 计算文件的唯一标识，用于断点续传
(new WebUploader.Uploader()).md5File(file, 0, 100 * 1024 * 1024)
.then(function (val) {
this.fileMd5 = val;
this.uploadFile = file;
// alert(this.fileMd5 )
//向服务端请求注册上传文件
$.ajax(
{
type: "POST",
url: "/api/media/upload/register",
data: {
// 文件唯一表示
fileMd5: this.fileMd5,
fileName: file.name,
fileSize: file.size,
mimetype: file.type,
fileExt: file.ext
},
dataType: "json",
success: function (response) {
if (response.success) {
//alert('上传文件注册成功开始上传');
deferred.resolve();
} else {
alert(response.message);
deferred.reject();
}
}
}
);
}.bind(this));
return deferred.promise();
}.bind(this),
beforeSend: function (block) {
var deferred = WebUploader.Deferred();
// 每次上传分块前校验分块，如果已存在分块则不再上传，达到断点续传的目的
$.ajax(
{
type: "POST",
url: "/api/media/upload/checkchunk",
data: {
// 文件唯一表示
fileMd5: this.fileMd5,
// 当前分块下标
chunk: block.chunk,
// 当前分块大小
chunkSize: block.end - block.start
},
dataType: "json",
success: function (response) {
if (response.fileExist) {
// 分块存在，跳过该分块
deferred.reject();
} else {
// 分块不存在或不完整，重新发送
deferred.resolve();
}
}
}
);
//构建fileMd5参数，上传分块时带上fileMd5
this.uploader.options.formData.fileMd5 = this.fileMd5;
this.uploader.options.formData.chunk = block.chunk;
return deferred.promise();
}.bind(this),
afterSendFile: function (file) {
// 合并分块
$.ajax(
{
type: "POST",
url: "/api/media/upload/mergechunks",
data: {
fileMd5: this.fileMd5,
fileName: file.name,
fileSize: file.size,
mimetype: file.type,
fileExt: file.ext
},
success: function (response) {
//在这里解析合并成功结果
if (response && response.success) {
alert("上传成功")
} else {
alert("上传失败")
}
}
}
);
}.bind(this)
}
);
// 创建uploader对象，配置参数
this.uploader = WebUploader.create(
{
swf: "/static/plugins/webuploader/dist/Uploader.swf",//上传文件的flash文件，浏览器不支持h5时启动flash
server: "/api/media/upload/uploadchunk",//上传分块的服务端地址，注意跨域问题
fileVal: "file",//文件上传域的name
pick: "#picker",//指定选择文件的按钮容器
auto: false,//手动触发上传
disableGlobalDnd: true,//禁掉整个页面的拖拽功能
chunked: true,// 是否分块上传
chunkSize: 1 * 1024 * 1024, // 分块大小（默认5M）
threads: 3, // 开启多个线程（默认3个）
prepareNextFile: true// 允许在文件传输时提前把下一个文件准备好
}
);
// 将文件添加到队列
this.uploader.on("fileQueued", function (file) {
this.uploadFile = file;
this.percentage = 0;
}.bind(this)
);
//选择文件后触发
this.uploader.on("beforeFileQueued", function (file) {
// this.uploader.removeFile(file)
//重置uploader
this.uploader.reset()
this.percentage = 0;
}.bind(this));
// 监控上传进度
// percentage:代表上传文件的百分比
this.uploader.on("uploadProgress", function (file, percentage) {
this.percentage = Math.ceil(percentage * 100);
}.bind(this));
//上传失败触发
this.uploader.on("uploadError", function (file, reason) {
console.log(reason)
alert("上传文件失败");
});
//上传成功触发
this.uploader.on("uploadSuccess", function (file, response) {
console.log(response)
// alert("上传文件成功！");
});
//每个分块上传请求后触发
this.uploader.on('uploadAccept', function (file, response) {
if (!(response && response.success)) {//分块上传失败，返回false
return false;
}
});
}
}
</script>
<style scoped>
</style>
server
package com.xuecheng.manage_media.service;
import com.alibaba.fastjson.JSON;
import com.xuecheng.framework.domain.media.MediaFile;
import com.xuecheng.framework.domain.media.response.CheckChunkResult;
import com.xuecheng.framework.domain.media.response.MediaCode;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.manage_media.config.RabbitMQConfig;
import com.xuecheng.manage_media.dao.MediaFileRepository;
import org.apache.commons.codec.digest.DigestUtils;
import org.apache.commons.io.IOUtils;
import org.springframework.amqp.AmqpException;
import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.*;
/**
* @author Administrator
* @version 1.0
**/
@Service
public class MediaUploadService {
@Autowired
MediaFileRepository mediaFileRepository;
@Value("${xc-service-manage-media.upload-location}")
String upload_location;
@Value("${xc-service-manage-media.mq.routingkey-media-video}")
String routingkey_media_video;
@Autowired
RabbitTemplate rabbitTemplate;
//得到文件所属目录路径
private String getFileFolderPath(String fileMd5){
return upload_location + fileMd5.substring(0,1) + "/" + fileMd5.substring(1,2) + "/" + fileMd5 + "/";
}
//得到文件的路径
private String getFilePath(String fileMd5,String fileExt){
return upload_location + fileMd5.substring(0,1) + "/" + fileMd5.substring(1,2) + "/" + fileMd5 + "/" + fileMd5 + "." +fileExt;
}
//得到块文件所属目录路径
private String getChunkFileFolderPath(String fileMd5){
return upload_location + fileMd5.substring(0,1) + "/" + fileMd5.substring(1,2) + "/" + fileMd5 + "/chunk/";
}
/**
* 文件上传前的注册，检查文件是否存在
* 根据文件md5得到文件路径
* 规则：
* 一级目录：md5的第一个字符
* 二级目录：md5的第二个字符
* 三级目录：md5
* 文件名：md5+文件扩展名
* @param fileMd5 文件md5值
* @param fileExt 文件扩展名
* @return 文件路径
*/
public ResponseResult register(String fileMd5, String fileName, Long fileSize, String mimetype, String fileExt) {
//1 检查文件在磁盘上是否存在
//文件所属目录的路径
String fileFolderPath = this.getFileFolderPath(fileMd5);
//文件的路径
String filePath =this.getFilePath(fileMd5,fileExt);
File file = new File(filePath);
//文件是否存在
boolean exists = file.exists();
//2 检查文件信息在mongodb中是否存在
Optional<MediaFile > optional = mediaFileRepository.findById(fileMd5);
if(exists && optional.isPresent()){
//文件存在
ExceptionCast.cast(MediaCode.UPLOAD_FILE_REGISTER_EXIST);
}
//文件不存在时作一些准备工作，检查文件所在目录是否存在，如果不存在则创建
File fileFolder = new File(fileFolderPath);
if(!fileFolder.exists()){
fileFolder.mkdirs();
}
return new ResponseResult(CommonCode.SUCCESS);
}
//分块检查（前端会将文件进行分块，每一个块都会进行checkchunk())
/**
*
* @param fileMd5 文件md5
* @param chunk 块的下标
* @param chunkSize 块的大小
* @return
*/
public CheckChunkResult checkchunk(String fileMd5, Integer chunk, Integer chunkSize) {
//检查分块文件是否存在
//得到分块文件的所在目录
String chunkFileFolderPath = this.getChunkFileFolderPath(fileMd5);
//块文件
File chunkFile = new File(chunkFileFolderPath + chunk);
if(chunkFile.exists()){
//块文件存在
return new CheckChunkResult(CommonCode.SUCCESS,true);
}else{
//块文件不存在
return new CheckChunkResult(CommonCode.SUCCESS,false);
}
}
//上传分块
public ResponseResult uploadchunk(MultipartFile file, String fileMd5, Integer chunk) {
//检查分块目录，如果不存在则要自动创建
//得到分块目录
String chunkFileFolderPath = this.getChunkFileFolderPath(fileMd5);
//得到分块文件路径
String chunkFilePath = chunkFileFolderPath + chunk;
File chunkFileFolder = new File(chunkFileFolderPath);
//如果不存在则要自动创建
if(!chunkFileFolder.exists()){
chunkFileFolder.mkdirs();
}
//得到上传文件的输入流
InputStream inputStream = null;
FileOutputStream outputStream =null;
try {
inputStream = file.getInputStream();
outputStream = new FileOutputStream(new File(chunkFilePath));
IOUtils.copy(inputStream,outputStream);
} catch (IOException e) {
e.printStackTrace();
}finally {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
try {
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return new ResponseResult(CommonCode.SUCCESS);
}
//合并文件
public ResponseResult mergechunks(String fileMd5, String fileName, Long fileSize, String mimetype, String fileExt) {
//1、合并所有分块
//得到分块文件的属目录
String chunkFileFolderPath = this.getChunkFileFolderPath(fileMd5);
File chunkFileFolder = new File(chunkFileFolderPath);
//分块文件列表
File[] files = chunkFileFolder.listFiles();
List<File> fileList = Arrays.asList(files);
//创建一个合并文件
String filePath = this.getFilePath(fileMd5, fileExt);
File mergeFile = new File(filePath);
//执行合并
mergeFile = this.mergeFile(fileList, mergeFile);
if(mergeFile == null){
//合并文件失败
ExceptionCast.cast(MediaCode.MERGE_FILE_FAIL);
}
//2、校验文件的md5值是否和前端传入的md5一到
boolean checkFileMd5 = this.checkFileMd5(mergeFile, fileMd5);
if(!checkFileMd5){
//校验文件失败
ExceptionCast.cast(MediaCode.MERGE_FILE_CHECKFAIL);
}
//3、将文件的信息写入mongodb
MediaFile mediaFile = new MediaFile();
mediaFile.setFileId(fileMd5);
mediaFile.setFileOriginalName(fileName);
mediaFile.setFileName(fileMd5 + "." +fileExt);
//文件路径保存相对路径
String filePath1 = fileMd5.substring(0,1) + "/" + fileMd5.substring(1,2) + "/" + fileMd5 + "/";
mediaFile.setFilePath(filePath1);
mediaFile.setFileSize(fileSize);
mediaFile.setUploadTime(new Date());
mediaFile.setMimeType(mimetype);
mediaFile.setFileType(fileExt);
//状态为上传成功
mediaFile.setFileStatus("301002");
mediaFileRepository.save(mediaFile);
//向MQ发送视频处理消息
sendProcessVideoMsg(mediaFile.getFileId());
return new ResponseResult(CommonCode.SUCCESS);
}
/**
* 发送视频处理消息
* @param mediaId 文件id
* @return
*/
public ResponseResult sendProcessVideoMsg(String mediaId){
//查询数据库mediaFile
Optional<MediaFile> optional = mediaFileRepository.findById(mediaId);
if(!optional.isPresent()){
ExceptionCast.cast(CommonCode.FAIL);
}
//构建消息内容
Map<String,String> map = new HashMap<>();
map.put("mediaId",mediaId);
String jsonString = JSON.toJSONString(map);
//向MQ发送视频处理消息
try {
rabbitTemplate.convertAndSend(RabbitMQConfig.EX_MEDIA_PROCESSTASK,routingkey_media_video,jsonString);
} catch (AmqpException e) {
e.printStackTrace();
return new ResponseResult(CommonCode.FAIL);
}
return new ResponseResult(CommonCode.SUCCESS);
}
//校验文件
private boolean checkFileMd5(File mergeFile,String md5){
try {
//创建文件输入流
FileInputStream inputStream = new FileInputStream(mergeFile);
//得到文件的md5
String md5Hex = DigestUtils.md5Hex(inputStream);
//和传入的md5比较
if(md5.equalsIgnoreCase(md5Hex)){
return true;
}
} catch (Exception e) {
e.printStackTrace();
return false;
}
return false;
}
//合并文件
private File mergeFile(List<File> chunkFileList, File mergeFile) {
try {
//如果合并文件已存在则删除，否则创建新文件
if (mergeFile.exists()) {
mergeFile.delete();
} else {
//创建一个新文件
mergeFile.createNewFile();
}
//对块文件进行排序
Collections.sort(chunkFileList, new Comparator<File>() {
@Override
public int compare(File o1, File o2) {
if(Integer.parseInt(o1.getName())>Integer.parseInt(o2.getName())){
return 1;
}
return -1;
}
});
//创建一个写对象
RandomAccessFile raf_write = new RandomAccessFile(mergeFile,"rw");
byte[] b = new byte[1024];
for(File chunkFile:chunkFileList){
RandomAccessFile raf_read = new RandomAccessFile(chunkFile,"r");
int len = -1;
while ((len = raf_read.read(b))!=-1){
raf_write.write(b,0,len);
}
raf_read.close();
}
raf_write.close();
return mergeFile;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
当文件上传到服务器后,我们需要使用ffmpeg来将视频进行处理,处理完成之后需要写入数据库（视频的id是前端传入的md5，视频的名字，视频的url，等信息）
