实现效果:选择文件实现上传文件功能。
借助三方开源组件来实现:Bootstrap Blazor
<ButtonUpload BrowserButtonText="上传APP" TValue="string" IsMultiple="true" ShowProgress="true" OnChange="@OnClickToUpload" OnDelete="@(fileName => Task.FromResult(true))"/>
private CancellationTokenSource? ReadToken { get; set; }
private async Task OnClickToUpload(UploadFile file) {
await SaveToFile(file);
}
private async Task<bool> SaveToFile(UploadFile file) {
// Server Side 使用
// Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
// 生成写入文件名称
var ret = false;
var fileName = DateTime.Now.ToString("yyyyMMddhhmmssfff") + Path.GetExtension(file.OriginFileName);
var filePath = Path.Combine(Settings.saveAppFullPath, fileName); //Path.GetFileNameWithoutExtension(file.OriginFileName) {DateTimeOffset.Now:yyyyMMddHHmmss}
var dbPath = Path.Combine(Settings.saveAppRelvPath, fileName);
ReadToken ??= new CancellationTokenSource();
ret = await file.SaveToFile(filePath, Settings.UploadFileMaxSize, ReadToken.Token);
if (ret) {
// 保存成功
} else {
var errorMessage = $"{Localizer["SaveFileError"]} {file.OriginFileName}";
file.Code = 1;
file.Error = errorMessage;
await ToastService.Error(Localizer["UploadFile"], errorMessage);
}
return ret;
}
文档信息
- 本文作者:zhupite
- 本文链接:https://zhupite.com/program/blazor-component-upload-file.html
- 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)