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

Question

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

<h3 class="text-center">Subir Archivo</h3>

<div class="input-group col-md-4">
    <div class="input-group-prepend">
        <span class="input-group-text"></span>
    </div>
    <div class="custom-file">
        <InputFile class="custom-file-input" id="inputGroupFile01" lang="es" multiple OnChange="HandleSelection" />
        <label class="custom-file-label" for="inputGroupFile01">Seleccionar Archivo...</label>
    </div>
</div>
<br />
@if (selectedFiles != null)
{
    <table class="table table-hover text-center">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Tamaño en bytes</th>
                <th>Fecha de Modificación</th>
                <th>Tipo de Archivo</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var file in selectedFiles)
            {
                <tr>
                    <td>@file.Name</td>
                    <td>@file.Size</td>
                    <td>@file.LastModified</td>
                    <td>@file.Type</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    IFileListEntry[] selectedFiles;

    async Task HandleSelection(IFileListEntry[] files)
    {
        selectedFiles = files;
        foreach (var selectedFiles in files)
        {
            if (files != null)
            {
                var ms = new MemoryStream();
                await selectedFiles.Data.CopyToAsync(ms);
                var content = new MultipartFormDataContent {
                { new ByteArrayContent(ms.GetBuffer()), "\"Upload\"", selectedFiles.Name } };
                await Http.PostAsync("Upload", content);                             
            }
        }
    }
}

这就是它的样子:


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

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值(value)。在 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 来为您提供您想要的确切外观和感觉。