如何上传文件并查看进度条？

Question

你好，我有一个正在使用的问题blazor，aspnet core我已经有一个组件，uploads files在上传时它会显示一个包含我上传的文件数据的表格，但我希望在上传文件时它只显示名称和一段progress bar时间文件已加载，但我不知道该怎么做。

\n

这是我上传文件的代码：

\n

<h3 class="text-center">Subir Archivo</h3>\n\n<div class="input-group col-md-4">\n    <div class="input-group-prepend">\n        <span class="input-group-text"></span>\n    </div>\n    <div class="custom-file">\n        <InputFile class="custom-file-input" id="inputGroupFile01" lang="es" multiple OnChange="HandleSelection" />\n        <label class="custom-file-label" for="inputGroupFile01">Seleccionar Archivo...</label>\n    </div>\n</div>\n<br />\n@if (selectedFiles != null)\n{\n    <table class="table table-hover text-center">\n        <thead>\n            <tr>\n                <th>Nombre</th>\n                <th>Tama\xc3\xb1o en bytes</th>\n                <th>Fecha de Modificaci\xc3\xb3n</th>\n                <th>Tipo de Archivo</th>\n            </tr>\n        </thead>\n        <tbody>\n            @foreach (var file in selectedFiles)\n            {\n                <tr>\n                    <td>@file.Name</td>\n                    <td>@file.Size</td>\n                    <td>@file.LastModified</td>\n                    <td>@file.Type</td>\n                </tr>\n            }\n        </tbody>\n    </table>\n}\n\n@code {\n    IFileListEntry[] selectedFiles;\n\n    async Task HandleSelection(IFileListEntry[] files)\n    {\n        selectedFiles = files;\n        foreach (var selectedFiles in files)\n        {\n            if (files != null)\n            {\n                var ms = new MemoryStream();\n                await selectedFiles.Data.CopyToAsync(ms);\n                var content = new MultipartFormDataContent {\n                { new ByteArrayContent(ms.GetBuffer()), "\\"Upload\\"", selectedFiles.Name } };\n                await Http.PostAsync("Upload", content);                             \n            }\n        }\n    }\n}\n

\n

看起来就是这样：\n

\n

\n

我想要这样的东西，但我不知道这样做有多容易

\n

Answer 1

网络上没有现成的代码可以满足您的要求。Syncfusion确实有与您正在寻找的组件相匹配的组件，但不幸的是您需要许可证才能使用它。

Umair提到的是迄今为止在 blazor 中上传文件的最佳方式，而且无需许可证。

(100.0 * file.Data.Position / file.Size).ToString("0")将为您提供文件读取的百分比。接下来，您可以使用bootstrap或任何其他进度条来跟踪您的进度。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

在上面的例子中，你所要做的就是改变style和aria-valuenow价值。在 Blazor 中，您的代码将如下所示。

@{
    var progress = (100.0 * file.Data.Position / file.Size).ToString("0");
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="@($"width: {progress}%")" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
}

稍后，您可以尝试使用 css 来获得您想要的确切外观和感觉。