blazor 上传文件
ASP.NET Core Blazor 文件上传 | Microsoft Learn
前端
1
| <InputFile OnChange="LoadIconFiles"/>
|
后端，为了方便，封装一个可以保存到不同目录，并回显保存到何处的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| private async Task<string> __UploadTo(InputFileChangeEventArgs obj, string saveToFolderName)
{
if (obj?.File != null)
{
Log.Information("File uploading: {Name}", obj.File.Name);
var file = obj.File;
var fileName = file.Name;
var ext = Path.GetExtension(fileName);
var stem = Path.GetFileNameWithoutExtension(fileName);
var newFileName = stem + ext;
var filePath = Path.Combine("wwwroot", saveToFolderName, newFileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.OpenReadStream(1024 * 1024 * 30).CopyToAsync(stream);
}
Log.Information("File uploaded: {Name} - {Path}", fileName, filePath);
return $"使用此名称作为文件图片名: /{saveToFolderName}/{fileName}";
}
else
{
return "请选择图片上传";
}
}
private async Task LoadIconFiles(InputFileChangeEventArgs arg)
{
var msg = await __UploadTo(arg, saveToFolderName: "img");
_loadIconPrompt = msg;
StateHasChanged();
}
|
注意其中的 await file.OpenReadStream(1024 * 1024 * 30).CopyToAsync(stream);，里面指定的是文件大小，单位为字节。若此数量过低，则无法上传文件。
这样的方法会把上传的文件载入内存。如果上传大文件，看下文的微软官方文档
服务器端或客户端，没有文件读取或上传大小限制，尤其对于 InputFile 组件。 但是，将数据从 JavaScript 封送到 C# 时，客户端 Blazor 会将文件的字节读取到单个 JavaScript 数组缓冲区中，大小不超过 2 GB 或设备的可用内存。 使用 > 组件进行客户端上传时，大型文件上传 (InputFile 250 MB) 可能会失败。 有关详细信息，请参阅以下讨论：
对于尝试使用 InputFile 组件时失败的大型客户端文件上传，建议使用多个 HTTP 范围请求（而不是使用 InputFile 组件）通过自定义组件将大型文件分块。