.NetCore+WebUploader实现大文件分片上传

项目要求通过网站上传大文件，比如视频文件，通过摸索实现了文件分片来上传，然后后台进行合并。

使用了开源的前台上传插件WebUploader（http://fex.baidu.com/webuploader/）

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

直接上代码，前台cshtml

@{Layout = null;
}
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><link href="~/js/webuploader/webuploader.css" rel="stylesheet" /><link href="~/js/bootstrap.min.css" rel="stylesheet" /><script src="~/js/jquery.min.js"></script><script src="~/js/webuploader/webuploader.js"></script><title>Upload</title><script>jQuery(function () {var $ = jQuery,$list = $('#thelist'),$btn = $('#ctlBtn'),state = 'pending',fileMd5,flag = true,dataState,fm = [],fnum,Token,uploader;var FileExt = ["mpg", "mpeg", "mp4", "avi"];Token = '@ViewBag.Token';if (Token == '' || Token== 'undefined'){$("#uploader").hide();alert("登录超时，请重新登录。");}//监听分块上传过程中的三个时间点WebUploader.Uploader.register({"before-send-file": "beforeSendFile","before-send": "beforeSend","after-send-file": "afterSendFile",}, {beforeSendFile: function (file) {var startTime = new Date(file.lastModifiedDate);fileName = file.name;var deferred = WebUploader.Deferred(); (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {console.log("正在读取文件");}).then(function (val) {fileMd5 = val;fm.push(fileMd5); deferred.resolve();});return deferred.promise();},//时间点2：如果有分块上传，则每个分块上传之前调用此函数beforeSend: function (block) {var deferred = WebUploader.Deferred();//上传前ajax检测一下此文件块是否已经上传this.owner.options.formData.fileMd5 = fileMd5;this.owner.options.formData.chunk = block.chunk;deferred.resolve();return deferred.promise();},//时间点3：所有分块上传成功后调用此函数afterSendFile: function (file) {var deferred = $.Deferred();$('#' + file.id).find('p.state').text('执行最后一步');console.log(file);console.log(file.guid);$.ajax({type: "POST",url: "/api/v1/Check/FileMerge",data: {guid: file.guid,fileMd5: fm[fnum],fileName: file.name},cache: false,async: false,success: function (response) {fnum++;console.log(response);if (response.success == true) {dataState = response;flag = true;} else {flag = false;}deferred.resolve();},error: function () {fnum++;dataState = undefined;flag = false;deferred.reject();}});return deferred.promise();}});uploader = WebUploader.create({resize: false,fileNumLimit: 10,swf: '/js/Uploader.swf',server: '/api/v1/Check/FileSave',pick: '#picker',chunked: true,chunkSize: 10 * 1024 * 1024,chunkRetry: 5//, formData: {//    guid: GUID//}});uploader.on('beforeFileQueued', function (file) {var isAdd = false;for (var i = 0; i < FileExt.length; i++) {if (file.ext == FileExt[i]) {file.guid = WebUploader.Base.guid();isAdd = true;break;}}return isAdd;});uploader.on('uploadBeforeSend', function (object, data, headers) {//console.log(object);headers.Authorization =Token;data.guid = object.file.guid;});// 当有文件添加进来的时候uploader.on('fileQueued', function (file) {$list.append('<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<input type="hidden" id="h_' + file.id + '" value="' + file.guid + '" />' +'<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) {if (dataState == undefined) {$('#' + file.id).find('p.state').text('上传失败');$('#' + file.id).find('button').remove();$('#' + file.id).find('p.state').before('<button id="retry" type="button" class="btn btn-primary fright retry pbtn">重新上传</button>');flag = false;file.setStatus('error');}if (dataState.success == true) {$('#' + file.id).find('p.state').text('已上传');$('#' + file.id).find('button').remove();} else {$('#' + file.id).find('p.state').text('上传失败');flag = false;}});uploader.on('uploadError', function (file) {$('#' + file.id).find('p.state').text('上传出错');});uploader.on('uploadComplete', function (file) {$('#' + file.id).find('.progress').fadeOut();});uploader.on('all', function (type) {if (type === 'startUpload') {state = 'uploading';} else if (type === 'stopUpload') {state = 'paused';} else if (type === 'uploadFinished') {state = 'done';}if (state === 'done') {$btn.text('继续上传');} else if (state === 'uploading') {$btn.text('暂停上传');} else {$btn.text('开始上传');}});$btn.on('click', function () {if (state === 'uploading') {uploader.stop();} else if (state == 'done') {window.location.reload();}else {uploader.upload();}});});</script>
</head>
<body><div id="uploader" class="wu-example"><span style="color:red">只能上传mpg、mpeg、mp4、avi格式的视频文件</span><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker" class="webuploader-container"><div class="webuploader-pick">选择文件</div><div style="position: absolute; top: 0px; left: 0px; width: 88px; height: 34px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div><button id="ctlBtn" class="btn btn-default">开始上传</button> </div></div>
</body>
</html>

后台代码：

#region 上传视频public IActionResult Upload(){ViewBag.Token = HttpContext.Request.Headers["Authorization"];//获取认证信息，传递给前台，方便Ajax请求时提供return View();}/// <summary>/// 上传文件/// </summary>/// <returns></returns>[HttpPost]public async Task<IActionResult> FileSave(){var date = Request;var files = Request.Form.Files;long size = files.Sum(f => f.Length);foreach (var formFile in files){if (formFile.Length > 0){string fileExt = formFile.FileName.Substring(formFile.FileName.IndexOf('.')); //文件扩展名，不含“.”long fileSize = formFile.Length; //获得文件大小，以字节为单位//string newFileName = Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名string DirPath = Path.Combine(_uploadConfig.TmpPath, Request.Form["guid"]);if (!Directory.Exists(DirPath)){Directory.CreateDirectory(DirPath);}var filePath = DirPath + "/" + Request.Form["chunk"] + fileExt;using (var stream = new FileStream(filePath, FileMode.Create)){await formFile.CopyToAsync(stream);}}}return Ok(new { count = files.Count, size });}/// <summary>/// 合并请求/// </summary>/// <returns></returns>[HttpPost]public async Task<IActionResult> FileMerge(){bool ok = false;string errmsg = "";try{var temporary = Path.Combine(_uploadConfig.TmpPath, Request.Form["guid"]);//临时文件夹string fileName = Request.Form["fileName"];//文件名string fileExt = Path.GetExtension(fileName);//获取文件后缀var files = Directory.GetFiles(temporary);//获得下面的所有文件var finalFilePath = Path.Combine(_uploadConfig.UpLoadPath + fileName);//最终的文件名//var fs = new FileStream(finalFilePath, FileMode.Create);using (var fs = new FileStream(finalFilePath, FileMode.Create)){foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x)){var bytes = System.IO.File.ReadAllBytes(part);await fs.WriteAsync(bytes, 0, bytes.Length);bytes = null;System.IO.File.Delete(part);//删除分块}Directory.Delete(temporary);//删除文件夹ok = true;}}catch (Exception ex){ok = false;errmsg = ex.Message;log4net.Error(errmsg);}if (ok){return Ok(new { success = true, msg = "" });}else{return Ok(new { success = false, msg = errmsg }); ;}}#endregion

.NetCore+WebUploader实现大文件分片上传相关推荐

webuploader 实现大文件分片上传
webuploader 分片上传文件最近研究了下大文件上传的方法,找到了webuploader js 插件进行大文件上传. 使用使用webuploader分成简单直选要引入 <!--引入CS ...
大文件分片上传，断点续传，秒传实现
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
使用webuploader组件实现大文件分片上传，断点续传
无组件断点续传.gif 1. 组件简介 webuploader:是一个以HTML5为主, Flash为辅的文件上传组件,采用大文件分片/并发上传的方式,极大地提高了文件上传的效率,同时兼容多种浏览器版 ...
jquery 分片上传php,php 大文件分片上传
前端部分上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
大文件分片上传前后端实现
最近在做公司的视频业务,涉及到大视频的上传. 之前的图片.Excel等上传做的很简单,直接表单提交后端用MultipartFile接收保存到磁盘就行了. 但是针对大文件的上传,需要做额外的处理,否则可 ...
java实现大文件分片上传
java实现大文件分片上传在项目中用到了大文件上传功能,最初从网上参考了一些代码来实现,但是最终的上传效果不是很好,速度比较慢. 之前的上传思路是: 前端利用webUploader分片大文件后端接 ...
大文件分片上传前端框架_基于Node.js的大文件分片上传
基于Node.js的大文件分片上传我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳 ...
大文件分片上传前端框架_无插件实现大文件分片上传，断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求在一个音视频的添加中,既要有音视频 ...

.NetCore+WebUploader实现大文件分片上传

.NetCore+WebUploader实现大文件分片上传相关推荐

最新文章

热门文章