Blazor FileSelect概述

的Blazor FileSelect组件帮助用户从本地文件系统中选择一个或多个文件。

Telerik FileSelect for Blazor提供了一个流对于每个选定的文件，以便您可以在内存中操作该文件或将其保存(上载)到服务器文件系统。

的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

与上传的比较

FileSelect和Upload组件是相似的，甚至是可互换的。主要的区别是它们如何与服务器通信，这可以决定使用哪个组件。

• 的FileSelect更适合WebAssembly如果你想在浏览器的。net运行时中接收和操作该文件，可以使用。将文件上传到远程服务器是可选的，并且依赖于OnSelect处理程序．这样做的好处是，FileSelect允许对上载过程进行完全控制。在Blazor服务器应用程序，FileSelect使用SignalR WebSocket和大文件支持(> 32KB)要求MaximumReceiveMessageSize配置．
• 的上传使用HTTP协议．更喜欢Blazor中的这个组件服务器而且WebAssembly应用程序可以直接将文件发送到远程端点，因为HTTP是通常的方式。需要大文件支持不同的配置，取决于接收的web服务器。

创建Blazor文件选择

1. 添加TelerikFileSelect标签。
2. 集AllowedExtensions到一个<字符串>列表．
3. 集MaxFileSize在字节。
4. 如果你使用的是Blazor服务器应用程序和MaxFileSize大于32 KB，增加最大SignalR消息大小．
5. 实现一个OnSelect事件处理程序．

步骤2和3是可选的，但强烈推荐。

 @code {List allowwedextensions {get;设置;} = new List() {".docx"， ".pdf"};int MaxFileSize {get;设置;} = 1024 * 1024;// 1 MB async任务OnSelectHandler(FileSelectEventArgs args) {foreach (var文件在args. files) {var buffer =新字节[file. stream . length];等待file.Stream.ReadAsync(缓冲);}}}

大文件支持

本节仅适用于Blazor服务器应用程序。BlazorWebAssembly应用程序不需要对FileSelect进行额外配置来处理大文件。

在Blazor服务器应用程序，FileSelect使用SignalR WebSocket，其缺省最大消息大小为32 KB．要处理较大的文件，请增大Blazor应用程序的最大WebSocket消息大小。看看这些微软的文章:

• ASP。NET Core SignalR配置
• SignalR缓冲区管理．

下面介绍如何配置MaximumReceiveMessageSize在。net 6和。net 5应用中。

使用Microsoft.AspNetCore.SignalR;var builder = WebApplication.CreateBuilder(args);/ /……// FileSelect builder.Services的SignalR消息大小万博体育手机版网址配置(options => {options。MaximumReceiveMessageSize = 1024 * 1024;// 1mb});

public void Configure万博体育手机版网址Services(IServiceCollection services){//…// FileSelect服务的SignalR消息大小。万博体育手机版网址配置(options => {options。MaximumReceiveMessageSize = 1024 * 1024;// 1mb});｝

在。net 5之前，框架支持的最大文件大小是2 GB，而在。net 6之后此限制已删除．在引入该组件时，Blazor的Telerik UI支持. net 3.1版本。对于多目标的目的，FileSelect组件允许最大文件大小为2 GB。

验证

FileSelect包括内置客户端验证用于文件大小和类型(扩展名)。中的其他自定义验证可以进行OnSelect事件．

FileSelect参数

下表列出了FileSelect参数。同时查看文件选择API参考获取属性、方法和事件的完整列表。

下一个步骤

• 探索文件选择验证
• 使用FileSelect事件

另请参阅

• FileSelect API
• 现场演示:FileSelect