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

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 的值。在 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 来获得您想要的确切外观和感觉。

Answer 2

您可以使用西装外套男士本人的 NuGet library：Steve Sanderson，他写了一个 blog post 来说明如何使用它。

基本上在文件被读取上传的时候，可以挂一个事件来读取文件上传进度的状态：

file.OnDataRead += (sender, eventArgs) => InvokeAsync(StateHasChanged);

这将使用以下代码给出百分比：

(100.0 * file.Data.Position / file.Size).ToString("0")

完整代码 here 来自 Steven Sanderson 的 GitHub