实现效果:选择文件实现上传文件功能。
借助三方开源组件来实现: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许可证)