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

Question

你好，我有一个问题，我正在使用blazor和asp.net core工作，我已经有了一个上传文件的组件，当上传文件时它会显示一个带有我上传文件数据的表格，但是我想要在上传文件时只显示名称和进度条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);                             
            }
        }
    }
}

这就是它的外观：

我想要类似于这样的东西，但我不知道做起来有多容易。

- Jasiel Torres

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 样式以获得您想要的精确外观和感觉。

- Suprabhat Biswal

---

非常感谢您的时间和帮助，我已经成功使用进度条完成了所需的操作。在网上有很多关于JavaScript和jQuery的示例，但是关于C#和Blazor的示例却很少。 - Jasiel Torres

Answer 2

你可以使用由Blazor之父Steve Sanderson编写的NuGet库，他已经在博客文章中介绍了如何使用它。

基本上，当文件被读取和上传时，你可以连接一个事件来读取文件上传进度的状态：

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

以下代码将提供百分比：

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

Steven Sanderson的GitHub上这里有完整的编程代码。

- Umair

---

谢谢提供的信息，事实上我从那篇博客中得到了上传文件的方法，但是上传组件与我需要的不同。 - Jasiel Torres