基于.NET Core + Jquery实现文件断点分片上传
基于.NET Core + Jquery实现文件断点分片上传前言
该项目是基于.NET Core 和 Jquery实现的文件分片上传，没有经过测试，因为博主没有那么大的文件去测试，目前上传2G左右的文件是没有问题的。
使用到的技术
[*]Redis缓存技术
[*]Jquery ajax请求技术
为什么要用到Redis，文章后面再说，先留个悬念。
页面截图
NuGet包
[*]Microsoft.Extensions.Caching.StackExchangeRedis
[*]Zack.ASPNETCore 杨中科封装的操作Redis包
分片上传是如何进行的？
在实现代码的时候，我们需要了解文件为什么要分片上传，我直接上传不行吗。大家在使用b站、快手等网站的视频上传的时候，可以发现文件中断的话，之前已经上传了的文件再次上传会很快。这就是分片上传的好处，如果发发生中断，我只要上传中断之后没有上传完成的文件即可，当一个大文件上传的时候，用户可能会断网，或者因为总总原因导致上传失败，但是几个G的文件，难不成又重新上传吗，那当然不行。
具体来说，分片上传文件的原理如下：
[*]客户端将大文件切割成若干个小文件块，并为每个文件块生成一个唯一的标识符，以便后续的合并操作。
[*]客户端将每个小文件块上传到服务器，并将其标识符和其他必要的信息发送给服务器。
[*]服务器接收到每个小文件块后，将其保存在临时文件夹中，并返回一个标识符给客户端，以便客户端后续的合并操作。
[*]客户端将所有小文件块的标识符发送给服务器，并请求服务器将这些小文件块合并成一个完整的文件。
[*]服务器接收到客户端的请求后，将所有小文件块按照其标识符顺序进行合并，并将合并后的文件保存在指定的位置。
[*]客户端接收到服务器的响应后，确认文件上传成功。
总的来说，分片上传文件的原理就是将一个大文件分成若干个小文件块，分别上传到服务器，最后再将这些小文件块合并成一个完整的文件。
在了解原理之后开始实现代码。
后端实现
注册reidis服务
首先在Program.cs配置文件中注册reidis服务
builder.Services.AddScoped<IDistributedCacheHelper, DistributedCacheHelper>();
//注册redis服务
builder.Services.AddStackExchangeRedisCache(options =>
{
string connStr = builder.Configuration.GetSection("Redis").Value;
string password = builder.Configuration.GetSection("RedisPassword").Value;
//redis服务器地址
options.Configuration = $"{connStr},password={password}";
});在appsettings.json中配置redis相关信息
"Redis": "redis地址",
"RedisPassword": "密码"保存文件的实现
在控制器中注入
private readonly IWebHostEnvironment _environment;
private readonly IDistributedCacheHelper _distributedCache;
public UpLoadController(IDistributedCacheHelper distributedCache, IWebHostEnvironment environment)
{
_distributedCache = distributedCache;
_environment = environment;
}从redis中取文件名
string GetTmpChunkDir(string fileName)
{
var s = _distributedCache.GetOrCreate<string>(fileName, ( e) =>
{
//滑动过期时间
//e.SlidingExpiration = TimeSpan.FromSeconds(1800);
//return Encoding.Default.GetBytes(Guid.NewGuid().ToString("N"));
return fileName.Split('.');
}, 1800);
if (s != null) return fileName.Split('.'); ;
return "";
}实现保存文件方法
/// <summary>
/// 保存文件
/// </summary>
/// <param name="file">文件</param>
/// <param name="fileName">文件名</param>
/// <param name="chunkIndex">文件块</param>
/// <param name="chunkCount">分块数</param>
/// <returns></returns>
public async Task<JsonResult> SaveFile(IFormFile file, string fileName, int chunkIndex, int chunkCount)
{
try
{
//说明为空
if (file.Length == 0)
{
return Json(new
{
success = false,
mas = "文件为空！！！"
});
}
if (chunkIndex == 0)
{
////第一次上传时，生成一个随机id,做为保存块的临时文件夹
//将文件名保存到redis中，时间是s
_distributedCache.GetOrCreate(fileName, (e) =>
{
//滑动过期时间
//e.SlidingExpiration = TimeSpan.FromSeconds(1800);
//return Encoding.Default.GetBytes(Guid.NewGuid().ToString("N"));
return fileName.Split('.'); ;
}, 1800);
}
if(!Directory.Exists(GetFilePath())) Directory.CreateDirectory(GetFilePath());
var fullChunkDir = GetFilePath() + dirSeparator + GetTmpChunkDir(fileName);
if(!Directory.Exists(fullChunkDir)) Directory.CreateDirectory(fullChunkDir);
var blog = file.FileName;
var newFileName = blog + chunkIndex + Path.GetExtension(fileName);
var filePath = fullChunkDir + Path.DirectorySeparatorChar + newFileName;
//如果文件块不存在则保存，否则可以直接跳过
if (!System.IO.File.Exists(filePath))
{
//保存文件块
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
//所有块上传完成
if (chunkIndex == chunkCount - 1)
{
//也可以在这合并，在这合并就不用ajax调用CombineChunkFile合并
//CombineChunkFile(fileName);
}
var obj = new
{
success = true,
date = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
newFileName,
originalFileName = fileName,
size = file.Length,
nextIndex = chunkIndex + 1,
};
return Json(obj);
}
catch (Exception ex)
{
return Json(new
{
success = false,
msg = ex.Message,
});
}
}讲解关键代码 Redis部分
当然也可以放到session里面，这里就不做演示了。
这是将文件名存入到redis中，作为唯一的key值，当然这里最好采用
Encoding.Default.GetBytes(Guid.NewGuid().ToString("N"));去随机生成一个id保存，为什么我这里直接用文件名，一开始写这个是为了在学校上机课时和室友之间互相传文件，所以没有考虑那么多，根据自己的需求来。
在第一次上传文件的时候，redis会保存该文件名，如果reids中存在该文件名，那么后面分的文件块就可以直接放到该文件名下。
_distributedCache.GetOrCreate(fileName, (e) =>
{
//滑动过期时间
//e.SlidingExpiration = TimeSpan.FromSeconds(1800);
//return Encoding.Default.GetBytes(Guid.NewGuid().ToString("N"));
return fileName.Split('.'); ;
}, 1800);合并文件方法
//目录分隔符，兼容不同系统
static readonly char dirSeparator = Path.DirectorySeparatorChar;//获取文件的存储路径
//用于保存的文件夹
private string GetFilePath()
{
return Path.Combine(_environment.WebRootPath, "UploadFolder");
} public async Task<JsonResult> CombineChunkFile(string fileName)
{
try
{
return await Task.Run(() =>
{
//获取文件唯一id值，这里是文件名
var tmpDir = GetTmpChunkDir(fileName);
//找到文件块存放的目录
var fullChunkDir = GetFilePath() + dirSeparator + tmpDir;
//开始时间
var beginTime = DateTime.Now;
//新的文件名
var newFileName = tmpDir + Path.GetExtension(fileName);
var destFile = GetFilePath() + dirSeparator + newFileName;
//获取临时文件夹内的所有文件块，排好序
var files = Directory.GetFiles(fullChunkDir).OrderBy(x => x.Length).ThenBy(x => x).ToList();
//将文件块合成一个文件
using (var destStream = System.IO.File.OpenWrite(destFile))
{
files.ForEach(chunk =>
{
using (var chunkStream = System.IO.File.OpenRead(chunk))
{
chunkStream.CopyTo(destStream);
}
System.IO.File.Delete(chunk);
});
Directory.Delete(fullChunkDir);
}
//结束时间
var totalTime = DateTime.Now.Subtract(beginTime).TotalSeconds;
return Json(new
{
success = true,
destFile = destFile.Replace('\\', '/'),
msg = $"合并完成 ! {totalTime} s",
});
});
}catch (Exception ex)
{
return Json(new
{
success = false,
msg = ex.Message,
});
}
finally
{
_distributedCache.Remove(fileName);
}
}前端实现
原理
原理就是获取文件，然后切片，通过分片然后递归去请求后端保存文件的接口。
首先引入Jquery
然后随便写一个上传页面
将文件拖拽到这里上传
或者
<input type="file" id="file1">
<button for="file-input" id="btnfile" value="Upload" >选择文件</button>
0%
<button id="btnQuxiao"disabled>暂停上传</button>css实现
稍微让页面能够看得下去
Jqueuy代码实现
合并文件请求
var isLastChunk = chunkIndex === chunkCount - 1;
当isLastChunk 为true时，执行合并文件，这里就不会再去请求保存文件了。
总结
分片上传文件原理很简单，根据原理去实现代码，慢慢的摸索很快就会熟练掌握，当然本文章有很多写的不好的地方可以指出来，毕竟博主还只是学生，需要不断的学习。
有问题评论，看到了会回复。
参考资料
[*]https://www.bilibili.com/video/BV1rB4y1Q7dF/?share_source=copy_web&vd_source=fce337a51d11a67781404c67ec0b5084
来源:https://www.cnblogs.com/ZYPLJ/archive/2023/03/27/17263430.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]