.NET或.NET Core Web APi基于tus協(xié)議實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例
前言
前兩天我采用技巧式方案基本實(shí)現(xiàn)大文件分片上傳,這里只是重點(diǎn)在于個人思路和親身實(shí)踐,若在實(shí)際生產(chǎn)環(huán)境要求比較高的話肯定不行,仍存在一些問題需要深入處理,本文繼續(xù)在之前基礎(chǔ)上給出基于tus協(xié)議的輪子方案,本打算再次嘗試?yán)?NET Core實(shí)現(xiàn)此協(xié)議,但在github上一搜索早在2016年就已有此協(xié)議對應(yīng)的.NET和.NET Core方案,并且一直更新到最近的.NET Core 3.x版本,完全滿足各位所需,本文是我寫出的一點(diǎn)demo,demo地址:https://github.com/wangpengxpy/tus-demo
基于tus協(xié)議實(shí)現(xiàn)斷點(diǎn)續(xù)傳演示
基于tus協(xié)議tusdotnet方案基本demo
關(guān)于此協(xié)議實(shí)現(xiàn)原理這里不做闡述,請參照上述github地址自行了解,本文只是給出.NET Core方案下的基本demo,我們上傳一個大文件然后通過進(jìn)度顯示上傳進(jìn)度以及對上傳可暫??衫^續(xù),專業(yè)點(diǎn)講就是斷點(diǎn)續(xù)傳,首先肯定是引入tus腳本和需要用到的bootstrap樣式,我們將進(jìn)度條默認(rèn)隱藏,當(dāng)上傳時才顯示,所以我們給出如下HTML。
<div class="form-horizontal" style="margin-top:80px;"> <div class="form-group" id="progress-group" style="display:none;"> <div id="size"></div> <div class="progress"> <div id="progress" class="progress-bar progress-bar-success progress-bar-animated progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <span id="percentage"></span> </div> </div> </div> <div class="form-group"> <div class="col-md-10"> <input name="file" id="file" type="file" /> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" id="submit" value="上傳" class="btn btn-success" /> <input type="button" id="pause" value="暫停" class="btn btn-danger" /> <input type="button" id="continue" value="繼續(xù)" class="btn btn-info" /> </div> </div> </div>
接下來就是使用引入的tus腳本,也沒什么太多要講解的,直接上代碼,這里稍微注意的是在如下元數(shù)據(jù)(metadata)屬性對象定義給出實(shí)際文件名,便于在后臺最終將上傳的文件轉(zhuǎn)換為目標(biāo)文件,至少得知道文件擴(kuò)展名,對吧。
<script type="text/javascript"> $(function () { var upload; //上傳 $('#submit').click(function () { $('#progress-group').show(); var file = $('#file')[0].files[0]; // 創(chuàng)建tus上傳對象 upload = new tus.Upload(file, { // 文件服務(wù)器上傳終結(jié)點(diǎn)地址設(shè)置 endpoint: "files/", // 重試延遲設(shè)置 retryDelays: [0, 3000, 5000, 10000, 20000], // 附件服務(wù)器所需的元數(shù)據(jù) metadata: { name: file.name, contentType: file.type || 'application/octet-stream', emptyMetaKey: '' }, // 回調(diào)無法通過重試解決的錯誤 onError: function (error) { console.log("Failed because: " + error) }, // 上傳進(jìn)度回調(diào) onProgress: onProgress, // 上傳完成后回調(diào) onSuccess: function () { console.log("Download %s from %s", upload.file.name, upload.url) } }) upload.start() }); //暫停 $('#pause').click(function () { upload.abort() }); //繼續(xù) $('#continue').click(function () { upload.start() }); //上傳進(jìn)度展示 function onProgress(bytesUploaded, bytesTotal) { var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2); $('#progress').attr('aria-valuenow', percentage); $('#progress').css('width', percentage + '%'); $('#percentage').html(percentage + '%'); var uploadBytes = byteToSize(bytesUploaded); var totalBytes = byteToSize(bytesTotal); $('#size').html(uploadBytes + '/' + totalBytes); } //將字節(jié)轉(zhuǎn)換為Byte、KB、MB等 function byteToSize(bytes, separator = '', postFix = '') { if (bytes) { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.min(parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString(), 10), sizes.length - 1); return `${(bytes / (1024 ** i)).toFixed(i ? 1 : 0)}${separator}${sizes[i]}${postFix}`; } return 'n/a'; } }); </script>
接下來進(jìn)入后臺,首先安裝對應(yīng)tus協(xié)議實(shí)現(xiàn)包,如下:
接下來則是添加tus中間件,說白了就是對tus的配置,各種配置都可滿足你所需,這里我只實(shí)現(xiàn)了文件上傳完成后將上傳文件轉(zhuǎn)換為目標(biāo)文件的處理,緊接著將如下實(shí)現(xiàn)tus配置以單例形式注入即可
private DefaultTusConfiguration CreateTusConfiguration(IServiceProvider serviceProvider) { var env = (IWebHostEnvironment)serviceProvider.GetRequiredService(typeof(IWebHostEnvironment)); //文件上傳路徑 var tusFiles = Path.Combine(env.WebRootPath, "tusfiles"); return new DefaultTusConfiguration { UrlPath = "/files", //文件存儲路徑 Store = new TusDiskStore(tusFiles), //元數(shù)據(jù)是否允許空值 MetadataParsingStrategy = MetadataParsingStrategy.AllowEmptyValues, //文件過期后不再更新 Expiration = new AbsoluteExpiration(TimeSpan.FromMinutes(5)), //事件處理(各種事件,滿足你所需) Events = new Events { //上傳完成事件回調(diào) OnFileCompleteAsync = async ctx => { //獲取上傳文件 var file = await ctx.GetFileAsync(); //獲取上傳文件元數(shù)據(jù) var metadatas = await file.GetMetadataAsync(ctx.CancellationToken); //獲取上述文件元數(shù)據(jù)中的目標(biāo)文件名稱 var fileNameMetadata = metadatas["name"]; //目標(biāo)文件名以base64編碼,所以這里需要解碼 var fileName = fileNameMetadata.GetString(Encoding.UTF8); var extensionName = Path.GetExtension(fileName); //將上傳文件轉(zhuǎn)換為實(shí)際目標(biāo)文件 File.Move(Path.Combine(tusFiles, ctx.FileId), Path.Combine(tusFiles, $"{ctx.FileId}{extensionName}")); } } }; }
然后獲取并使用上述添加的tus配置服務(wù)
app.UseTus(httpContext => Task.FromResult(httpContext.RequestServices.GetService<DefaultTusConfiguration>()));
在腳本中我們看到有個endpoint屬性,此屬性表示上傳到服務(wù)器的上傳結(jié)點(diǎn)地址,因?yàn)樵谏系椒?wù)器時我們可能需對此請求進(jìn)行額外處理,比如元數(shù)據(jù)中的文件名是否已提供等等,所以我們在使用結(jié)點(diǎn)映射時,添加對上述結(jié)點(diǎn)名稱的映射,如下:
endpoints.MapGet("/files/{fileId}", DownloadFileEndpoint.HandleRoute);
該映射第二個參數(shù)為RequestDelegate,這個參數(shù)用過.NET Core的童鞋都知道,這里我是直接拷貝該包的路由實(shí)現(xiàn),如下:
public static class DownloadFileEndpoint { public static async Task HandleRoute(HttpContext context) { var config = context.RequestServices.GetRequiredService<DefaultTusConfiguration>(); if (!(config.Store is ITusReadableStore store)) { return; } var fileId = (string)context.Request.RouteValues["fileId"]; var file = await store.GetFileAsync(fileId, context.RequestAborted); if (file == null) { context.Response.StatusCode = 404; await context.Response.WriteAsync($"File with id {fileId} was not found.", context.RequestAborted); return; } var fileStream = await file.GetContentAsync(context.RequestAborted); var metadata = await file.GetMetadataAsync(context.RequestAborted); context.Response.ContentType = GetContentTypeOrDefault(metadata); context.Response.ContentLength = fileStream.Length; if (metadata.TryGetValue("name", out var nameMeta)) { context.Response.Headers.Add("Content-Disposition", new[] { $"attachment; filename=\"{nameMeta.GetString(Encoding.UTF8)}\"" }); } using (fileStream) { await fileStream.CopyToAsync(context.Response.Body, 81920, context.RequestAborted); } } private static string GetContentTypeOrDefault(Dictionary<string, Metadata> metadata) { if (metadata.TryGetValue("contentType", out var contentType)) { return contentType.GetString(Encoding.UTF8); } return "application/octet-stream"; } }
文件上傳大小限制說明
我們知道無論是.NET還是.NET Core對于文件上傳大小都有默認(rèn)限制大小,這里對.NET Core中文件大小各種環(huán)境配置做一個統(tǒng)一說明,如果你將.NET Core寄宿在IIS上運(yùn)行,那么請修改web.config配置文件大小限制
<system.webServer> <security> <requestFiltering> //若不配置,默認(rèn)是28.6兆 <requestLimits maxAllowedContentLength="1073741824" /> </requestFiltering> </security> </system.webServer>
如果在開發(fā)環(huán)境默認(rèn)使用IIS運(yùn)行應(yīng)用程序,請通過如下根據(jù)實(shí)際情況配置文件上傳大小
services.Configure<IISServerOptions>(options => { options.MaxRequestBodySize = int.MaxValue; });
如果程序運(yùn)行在Kestrel服務(wù)器,那么請通過如下根據(jù)實(shí)際情況配置文件上傳大小
services.Configure<KestrelServerOptions>(options => { //若不配置,默認(rèn)是30兆(沒記錯的話) options.Limits.MaxRequestBodySize = int.MaxValue; });
如果是通過表單上傳文件,那么請通過如下根據(jù)實(shí)際情況配置文件上傳大小
services.Configure<FormOptions>(x => { x.ValueLengthLimit = int.MaxValue; //如果不配置,默認(rèn)是128兆(沒記錯的話) x.MultipartBodyLengthLimit = int.MaxValue; x.MultipartHeadersLengthLimit = int.MaxValue; });
總結(jié)
為了更好體驗(yàn)可以再加上當(dāng)前網(wǎng)絡(luò)寬帶情況或剩余多少分鐘,更詳細(xì)內(nèi)容請參考:https://github.com/tusdotnet/tusdotnet、https://github.com/tus/tus-js-client,關(guān)于大文件上傳處理到此結(jié)束,希望對那些苦苦尋找最終解決方案而無助的童鞋們提供最佳輪子,謝謝。
到此這篇關(guān)于.NET或.NET Core Web APi基于tus協(xié)議實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例的文章就介紹到這了,更多相關(guān).NET tus斷點(diǎn)續(xù)傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Asp.Net MVC 分頁、檢索、排序整體實(shí)現(xiàn)代碼
很多時候需要這樣的功能,對表格進(jìn)行分頁、排序和檢索。本篇文章主要介紹了Asp.Net MVC 分頁、檢索、排序整體實(shí)現(xiàn),有興趣的可以了解一下。2017-01-01Debian 8或Debian 9(64 位)安裝 .NET Core
這篇文章主要為大家詳細(xì)介紹了Debian 8或Debian 9(64 位)安裝 .NET Core,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-03asp.net后臺如何動態(tài)添加JS文件和css文件的引用
動態(tài)添加JS文件和css文件的引用在asp.net后臺如何實(shí)現(xiàn)呢?首先添加命名空間 using System.Web.UI.HtmlControls,之后按照下面的步驟操作即可2014-09-09Asp.net程序優(yōu)化js、css實(shí)現(xiàn)合并與壓縮的方法
這篇文章主要介紹了Asp.net程序優(yōu)化js、css實(shí)現(xiàn)合并與壓縮的方法,使用第三方組件實(shí)現(xiàn)訪問時將js與css文件壓縮并緩存在客戶端的效果,非常具有實(shí)用價值,需要的朋友可以參考下2014-12-12aspnetpager重寫url(偽靜態(tài))配置實(shí)例
這幾天要用到AspNetPager來做偽靜態(tài)分頁,找了些資料并把修改過程記錄下來。2013-04-04