首页

科技资讯

技术分享

程序开发

设备维修

登录

注册

接下来就是使用引入的tus脚本，也没什么太多要讲解的，直接上代码，这里稍微注意的是在如下元数据（metadata）属性对象定义给出实际文件名，便于在后台最终将上传的文件转换为目标文件，至少得知道文件扩展名，对吧。

  $(function () {
    var upload;

    //上传
    $('#submit').click(function () {

      $('#progress-group').show();

      var file = $('#file')[0].files[0];

      // 创建tus上传对象
      upload = new tus.Upload(file, {
        // 文件服务器上传终结点地址设置
        endpoint: "files/",
        // 重试延迟设置
        retryDelays: [0, 3000, 5000, 10000, 20000],
        // 附件服务器所需的元数据
        metadata: {
          name: file.name,
          contentType: file.type || 'application/octet-stream',
          emptyMetaKey: ''
        },
        // 回调无法通过重试解决的错误
        onError: function (error) {
          console.log("Failed because: " + error)
        },
        // 上传进度回调
        onProgress: onProgress,
        // 上传完成后回调
        onSuccess: function () {
          console.log("Download %s from %s", upload.file.name, upload.url)
        }
      })

      upload.start()
    });

    //暂停
    $('#pause').click(function () {
      upload.abort()
    });

    //继续
    $('#continue').click(function () {
      upload.start()
    });

    //上传进度展示
    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);
    }

    //将字节转换为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';
    }
  });

接下来进入后台，首先安装对应tus协议实现包，如下：

接下来则是添加tus中间件，说白了就是对tus的配置，各种配置都可满足你所需，这里我只实现了文件上传完成后将上传文件转换为目标文件的处理，紧接着将如下实现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),
    //元数据是否允许空值
    MetadataParsingStrategy = MetadataParsingStrategy.AllowEmptyValues,
    //文件过期后不再更新
    Expiration = new AbsoluteExpiration(TimeSpan.FromMinutes(5)),
    //事件处理（各种事件，满足你所需）
    Events = new Events
    {
      //上传完成事件回调
      OnFileCompleteAsync = async ctx =>
      {
        //获取上传文件
        var file = await ctx.GetFileAsync();

        //获取上传文件元数据
        var metadatas = await file.GetMetadataAsync(ctx.CancellationToken);
        
        //获取上述文件元数据中的目标文件名称
        var fileNameMetadata = metadatas["name"];

        //目标文件名以base64编码，所以这里需要解码
        var fileName = fileNameMetadata.GetString(Encoding.UTF8);

        var extensionName = Path.GetExtension(fileName);

        //将上传文件转换为实际目标文件
        File.Move(Path.Combine(tusFiles, ctx.FileId), Path.Combine(tusFiles, $"{ctx.FileId}{extensionName}"));
      }
    }
  };
}

然后获取并使用上述添加的tus配置服务

app.UseTus(httpContext => Task.FromResult(httpContext.RequestServices.GetService()));

在脚本中我们看到有个endpoint属性，此属性表示上传到服务器的上传结点地址，因为在上到服务器时我们可能需对此请求进行额外处理，比如元数据中的文件名是否已提供等等，所以我们在使用结点映射时，添加对上述结点名称的映射，如下：

endpoints.MapGet("/files/{fileId}", DownloadFileEndpoint.HandleRoute);

该映射第二个参数为RequestDelegate，这个参数用过.NET Core的童鞋都知道，这里我是直接拷贝该包的路由实现，如下：

public static class DownloadFileEndpoint
{
  public static async Task HandleRoute(HttpContext context)
  {
    var config = context.RequestServices.GetRequiredService();

    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 metadata)
  {
    if (metadata.TryGetValue("contentType", out var contentType))
    {
      return contentType.GetString(Encoding.UTF8);
    }

    return "application/octet-stream";
  }
}

文件上传大小限制说明

我们知道无论是.NET还是.NET Core对于文件上传大小都有默认限制大小，这里对.NET Core中文件大小各种环境配置做一个统一说明，如果你将.NET Core寄宿在IIS上运行，那么请修改web.config配置文件大小限制

 
  
   //若不配置，默认是28.6兆
   
  
 

如果在开发环境默认使用IIS运行应用程序，请通过如下根据实际情况配置文件上传大小

services.Configure(options =>
 {
   options.MaxRequestBodySize = int.MaxValue;
 });

如果程序运行在Kestrel服务器，那么请通过如下根据实际情况配置文件上传大小

services.Configure(options =>
{
   //若不配置，默认是30兆（没记错的话）
   options.Limits.MaxRequestBodySize = int.MaxValue; 
});

如果是通过表单上传文件，那么请通过如下根据实际情况配置文件上传大小

services.Configure(x =>
{
   x.ValueLengthLimit = int.MaxValue;
  //如果不配置，默认是128兆（没记错的话）
   x.MultipartBodyLengthLimit = int.MaxValue; 
   x.MultipartHeadersLengthLimit = int.MaxValue;
});

总结

为了更好体验可以再加上当前网络宽带情况或剩余多少分钟，更详细内容请参考：https://github.com/tusdotnet/tusdotnet、https://github.com/tus/tus-js-client，关于大文件上传处理到此结束，希望对那些苦苦寻找最终解决方案而无助的童鞋们提供最佳轮子，谢谢。