Ant Design Blazor
Upload上传
文件选择上传和拖拽上传控件。
何时使用
上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
- 当需要上传一个或一些文件时。
- 当需要展现上传的进度时。
- 当需要使用拖拽交互时。
Examples
经典款式，用户点击按钮弹出文件选择框。
点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小。
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
把文件拖入指定区域，完成上传，同样支持点击上传。
设置 multiple 后，在 IE10+ 可以一次上传多个文件。
可以使用原生的 InputFile 组件来实现文件流上传，Upload 组件只做 FileList 展示。
本例利用了
<label>的for属性来触发InputFile的点击。
使用 defaultFileList 设置已上传的内容。
使用 fileList 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况：
上传列表数量的限制。
读取远程路径并显示链接。
支持上传一个文件夹里的所有文件。
Upload API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| BeforeUpload | 属性在上传每个文件之前将执行的功能。如果返回 false，将停止上传。警告：IE9不支持该功能。 | Func<UploadFileItem, Boolean> | -- |
| BeforeAllUploadAsync | 属性在开始整体上传之前执行的挂钩函数。如果返回 false，将停止上传。警告：IE9不支持该功能。 | Func<List<UploadFileItem>, Task<Boolean>> | -- |
| BeforeAllUpload | 属性在开始整体上传之前执行的挂钩函数。如果返回 false，将停止上传。警告：IE9不支持该功能。 | Func<List<UploadFileItem>, Boolean> | -- |
| Name | 属性上传文件的名称 | String | -- |
| Action | 属性上传网址 | String | -- |
| Disabled | 属性禁用上传按钮 | Boolean | false |
| Data | 属性与文件一起上传的附加数据 | Dictionary<String, Object> | -- |
| ListType | 属性内置样式表，支持三种类型：text、picture或picture-card |
String | text |
| Directory | 属性支持上传整个目录。请参阅 |
Boolean | -- |
| Multiple | 属性是否支持选择多个文件。支持 IE10+。设置为 true 时，将允许按住 Ctrl 键选择多个文件 | Boolean | -- |
| Accept | 属性可以接受的文件类型。请参阅 |
String | -- |
| ShowUploadList | 属性显示是否上传文件列表 | Boolean | true |
| ShowDownloadIcon | 属性已上传（受控）的文件列表 | Boolean | -- |
| ShowPreviewIcon | 属性是否显示预览图标 | Boolean | -- |
| ShowRemoveIcon | 属性是否显示删除图标 | Boolean | -- |
| FileList | 属性获取或设置已上传的文件列表 | List<UploadFileItem> | -- |
| Locale | 属性UI 文本的语言环境 | UploadLocale | -- |
| FileListChanged | 属性文件列表改变时执行的事件回调 | EventCallback<List<UploadFileItem>> | -- |
| DefaultFileList | 属性已上传文件的默认列表。 | List<UploadFileItem> | -- |
| Headers | 属性设置请求头，IE10以上有效。 | Dictionary<String, String> | -- |
| OnSingleCompleted | 属性回调函数，在单个文件上传成功或失败时执行 | EventCallback<UploadInfo> | -- |
| OnCompleted | 属性一个回调函数，将在所有上传成功或失败时执行 | EventCallback<UploadInfo> | -- |
| OnChange | 属性回调函数，可以在上传状态因任何原因发生变化时执行。该函数将在上传进行中、完成或失败时被调用。 | EventCallback<UploadInfo> | -- |
| OnRemove | 属性单击删除文件按钮时执行的回调函数。当返回 true 时，文件将被删除并执行 AntDesign.Upload.FileListChanged 。当返回 false 时，删除将被取消。 |
Func<UploadFileItem, Task<Boolean>> | -- |
| OnPreview | 属性回调函数，当文件链接或预览图标被点击时执行 | EventCallback<UploadFileItem> | -- |
| OnDownload | 属性在上传列表中单击文件名链接时执行的回调。 | EventCallback<UploadFileItem> | -- |
| ChildContent | 属性上传按钮的内容 | RenderFragment | -- |
| ShowButton | 属性是否显示上传按钮。 | Boolean | -- |
| Drag | 属性是否允许拖放文件。 | Boolean | -- |
| Method | 属性上传请求的HTTP方法 | String | post |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
UploadInfo API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| File | 当前操作的文件 | UploadFileItem | -- |
| FileList | 当前文件列表 | List<UploadFileItem> | -- |
UploadFileItem API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Id | 用于识别文件的 GUID | String | -- |
| FileName | 文件名 | String | -- |
| Percent | 上传百分比 | Int32 | -- |
| ObjectURL | 文件的对象 URL | String | -- |
| Url | 实际文件的 URL | String | -- |
| Response | 来自服务器的响应 | String | -- |
| State | 上传状态 | UploadState | -- |
| Size | 文件大小 | Int64 | -- |
| Ext | 文件的扩展名 | String | -- |
| Type | 文件类型 | String | -- |
| ImageExtensions | 被视为图像的文件扩展名 | String[] | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| GetResponse(JsonSerializerOptions options) | TResponseModel | |
| IsPicture() | Boolean | 检查文件是否为图片。请参阅 AntDesign.UploadFileItem.ImageExtensions 以了解将导致其返回 true 的扩展。 |
常问问题
如何实现上传服务端?
- 可以参考Asp.Net Core WebAPI或[jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side）关于如何实现服务器端上传接口。
- rc-upload 中有一个 express 的模拟示例。
我可以使用 FileStream 吗?
该组件没有实现FileStream，如果追求在Server端上传而忽略WebAPI，可以尝试使用官方的InputFile组件（并美化Antd的风格）
我想显示下载链接。
请设置fileList中每一项的属性url来控制链接的内容。
服务端开启了 Antiforgery 验证，如何在上传的请求中加入 AntiForgeryToken？
Upload 组件自动会寻找页面中的 <input type="hidden" name="__RequestVerificationToken" value="... token ..." />，如果是静态表单中使用，您不需要做什么。
如果是在 Blazor Server 中使用，则需在静态的 App.razor 中添加 <AntiforgeryToken /> 组件，
或通过 官方文档 中提到的方式手动创建这样的隐藏域。
如果是通过Ajax方式获取的 AntiForgeryToken，请通过 Data 属性或 Headers 属性加入到上传请求中。