基于.NET Core + Jquery实现文件断点分片上传

前言

该项目是基于.NET Core 和 Jquery实现的文件分片上传，没有经过测试，因为博主没有那么大的文件去测试，目前上传2G左右的文件是没有问题的。

使用到的技术

• Redis缓存技术
• Jquery ajax请求技术

为什么要用到Redis，文章后面再说，先留个悬念。

页面截图

NuGet包

• Microsoft.Extensions.Caching.StackExchangeRedis

• Zack.ASPNETCore 杨中科封装的操作Redis包

分片上传是如何进行的？

在实现代码的时候，我们需要了解文件为什么要分片上传，我直接上传不行吗。大家在使用b站、快手等网站的视频上传的时候，可以发现文件中断的话，之前已经上传了的文件再次上传会很快。这就是分片上传的好处，如果发发生中断，我只要上传中断之后没有上传完成的文件即可，当一个大文件上传的时候，用户可能会断网，或者因为总总原因导致上传失败，但是几个G的文件，难不成又重新上传吗，那当然不行。

具体来说，分片上传文件的原理如下：

1. 客户端将大文件切割成若干个小文件块，并为每个文件块生成一个唯一的标识符，以便后续的合并操作。
2. 客户端将每个小文件块上传到服务器，并将其标识符和其他必要的信息发送给服务器。
3. 服务器接收到每个小文件块后，将其保存在临时文件夹中，并返回一个标识符给客户端，以便客户端后续的合并操作。
4. 客户端将所有小文件块的标识符发送给服务器，并请求服务器将这些小文件块合并成一个完整的文件。
5. 服务器接收到客户端的请求后，将所有小文件块按照其标识符顺序进行合并，并将合并后的文件保存在指定的位置。
6. 客户端接收到服务器的响应后，确认文件上传成功。

总的来说，分片上传文件的原理就是将一个大文件分成若干个小文件块，分别上传到服务器，最后再将这些小文件块合并成一个完整的文件。

在了解原理之后开始实现代码。

后端实现

注册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('.')[0];
            }, 1800);
            if (s != null) return fileName.Split('.')[0]; ;
            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('.')[0]; ;
                    }, 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('.')[0]; ;
}, 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

<script src="~/lib/jquery/dist/jquery.min.js"></script>

然后随便写一个上传页面

<div class="dropzone" id="dropzone">
    将文件拖拽到这里上传<br>
    或者<br>
    <input type="file" id="file1">
    <button for="file-input" id="btnfile" value="Upload" class="button">选择文件</button>
    <div id="progress">
        <div id="progress-bar"></div>
    </div>
    <div id="fName" style="font-size:16px"></div>
    <div id="percent">0%</div>
</div>
<button id="btnQuxiao" class="button2" disabled>暂停上传</button>
<div id="completedChunks"></div>

css实现

稍微让页面能够看得下去

<style>
    .dropzone {
        border: 2px dashed #ccc;
        padding: 25px;
        text-align: center;
        font-size: 20px;
        margin-bottom: 20px;
        position: relative;
    }

        .dropzone:hover {
            border-color: #aaa;
        }

    #file1 {
        display: none;
    }

    #progress {
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: #f5f5f5;
        border-radius: 5px;
        overflow: hidden;
    }

    #progress-bar {
        height: 100%;
        background-color: #4CAF50;
        width: 0%;
        transition: width 0.3s ease-in-out;
    }

    #percent {
        position: absolute;
        bottom: 15px;
        right: 10px;
        font-size: 16px;
        color: #999;
    }
    .button{
        background-color: greenyellow;
    }
    .button, .button2 {
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
    }

    .button2 {
        background-color: grey;
    }
</style>

Jqueuy代码实现

<script>
    $(function(){
        var pause = false;//是否暂停
        var $btnQuxiao = $("#btnQuxiao"); //暂停上传
        var $file; //文件
        var $completedChunks = $('#completedChunks');//上传完成块数
        var $progress = $('#progress');//上传进度条
        var $percent = $('#percent');//上传百分比
        var MiB = 1024 * 1024;
        var chunkSize = 8.56 * MiB;//xx MiB
        var chunkIndex = 0;//上传到的块
        var totalSize;//文件总大小
        var totalSizeH;//文件总大小M
        var chunkCount;//分块数
        var fileName;//文件名
        var dropzone = $('#dropzone'); //拖拽
        var $fileInput = $('#file1'); //file元素
        var $btnfile = $('#btnfile'); //选择文件按钮
        //通过自己的button按钮去打开选择文件的功能
        $btnfile.click(function(){
            $fileInput.click();
        })
        dropzone.on('dragover', function () {
            $(this).addClass('hover');
            return false;
        });
        dropzone.on('dragleave', function () {
            $(this).removeClass('hover');
            return false;
        });
        dropzone.on('drop', function (e) {
            setBtntrue();
            e.preventDefault();
            $(this).removeClass('hover');
            var val = $('#btnfile').val()
            if (val == 'Upload') {
                $file = e.originalEvent.dataTransfer.files[0];
                if ($file === undefined) {
                    $completedChunks.html('请选择文件 !');
                    return false;
                }

                totalSize = $file.size;
                chunkCount = Math.ceil(totalSize / chunkSize * 1.0);
                totalSizeH = (totalSize / MiB).toFixed(2);
                fileName = $file.name;
                $("#fName").html(fileName);

                $('#btnfile').val("Pause")
                pause = false;
                chunkIndex = 0;
            }
            postChunk();
        });
        $fileInput.change(function () {
            setBtntrue();
            console.log("开始上传文件！")
            var val = $('#btnfile').val()
            if (val == 'Upload') {
                $file = $fileInput[0].files[0];
                if ($file === undefined) {
                    $completedChunks.html('请选择文件 !');
                    return false;
                }

                totalSize = $file.size;
                chunkCount = Math.ceil(totalSize / chunkSize * 1.0);
                totalSizeH = (totalSize / MiB).toFixed(2);
                fileName = $file.name;
                $("#fName").html(fileName);

                $('#btnfile').val("Pause")
                pause = false;
                chunkIndex = 0;
            }
            postChunk();
        })
        function postChunk() {
            console.log(pause)
            if (pause)
                return false;

            var isLastChunk = chunkIndex === chunkCount - 1;
            var fromSize = chunkIndex * chunkSize;
            var chunk = !isLastChunk ? $file.slice(fromSize, fromSize + chunkSize) : $file.slice(fromSize, totalSize);

            var fd = new FormData();
            fd.append('file', chunk);
            fd.append('chunkIndex', chunkIndex);
            fd.append('chunkCount', chunkCount);
            fd.append('fileName', fileName);

            $.ajax({
                url: '/UpLoad/SaveFile',
                type: 'POST',
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                success: function (d) {
                    if (!d.success) {
                        $completedChunks.html(d.msg);
                        return false;
                    }

                    chunkIndex = d.nextIndex;
					
                    //递归出口
                    if (isLastChunk) {
                        $completedChunks.html('合并 .. ');
                        $btnfile.val('Upload');
                        setBtntrue();

                        //合并文件
                        $.post('/UpLoad/CombineChunkFile', { fileName: fileName }, function (d) {
                            $completedChunks.html(d.msg);
                            $completedChunks.append('destFile: ' + d.destFile);
                            $btnfile.val('Upload');
                            setBtnfalse()
                            $fileInput.val('');//清除文件
                            $("#fName").html("");
                        });
                    }
                    else {
                        postChunk();//递归上传文件块
                        //$completedChunks.html(chunkIndex + '/' + chunkCount );
                        $completedChunks.html((chunkIndex * chunkSize / MiB).toFixed(2) + 'M/' + totalSizeH + 'M');
                    }

                    var completed = chunkIndex / chunkCount * 100;
                    $percent.html(completed.toFixed(2) + '%').css('margin-left', parseInt(completed / 100 * $progress.width()) + 'px');
                    $progress.css('background', 'linear-gradient(to right, #ff0084 ' + completed + '%, #e8c5d7 ' + completed + '%)');
                },
                error: function (ex) {
                    $completedChunks.html('ex:' + ex.responseText);
                }
            });
        }
        $btnQuxiao.click(function(){
            var val = $('#btnfile').val();
            if (val == 'Pause') {
                $btnQuxiao.css('background-color', 'grey');
                val = 'Resume';
                pause = true;
            } else if (val === 'Resume') {
                $btnQuxiao.css('background-color', 'greenyellow');
                val = 'Pause';
                pause = false;
            }
            else {
                $('#btnfile').val("-");
            }
            console.log(val + "" + pause)
            $('#btnfile').val(val)
            postChunk();
        })
        //设置按钮可用
        function setBtntrue(){
            $btnQuxiao.prop('disabled', false)
            $btnQuxiao.css('background-color', 'greenyellow');
        }
        //设置按钮不可用
        function setBtnfalse() {
            $btnQuxiao.prop('disabled', true)
            $btnQuxiao.css('background-color', 'grey');
        }
    })
</script>

合并文件请求

var isLastChunk = chunkIndex === chunkCount - 1;

当isLastChunk 为true时，执行合并文件，这里就不会再去请求保存文件了。

总结

分片上传文件原理很简单，根据原理去实现代码，慢慢的摸索很快就会熟练掌握，当然本文章有很多写的不好的地方可以指出来，毕竟博主还只是学生，需要不断的学习。

有问题评论，看到了会回复。

参考资料

• https://www.bilibili.com/video/BV1rB4y1Q7dF/?share_source=copy_web&vd_source=fce337a51d11a67781404c67ec0b5084