"在 .NET 8 中，Blazor 服务器端文件上传并保存功能无法正常工作。"

Question

我在尝试学习Blazor时编写了一些代码，但文件上传似乎并未按预期工作。因此，我创建了一个新的标准Blazor服务器示例解决方案，并用以下简化示例替换了计数器页面，以展示我正在做的事情：

@page "/counter"


@code {
    private async Task OnChange(InputFileChangeEventArgs e) {

        foreach (var item in e.GetMultipleFiles()) {

            var buffer = new byte[item.Size];

            using var readstream = item.OpenReadStream(item.Size);
            await readstream.ReadAsync(buffer.AsMemory(0, (int)item.Size));

            using var f = File.Create(@"C:	est\image.jpg", buffer.Length, FileOptions.None);

            await f.WriteAsync(buffer);

            await f.FlushAsync();
        }
    }
}

这个例子中，当我上传一个图像时，它应该将其保存到指定的文件中。然而，对于一个1MB大小的图像，保存的图像似乎是不正常的，好像其中包含了一些乱码或文件不完整。为什么会这样呢？

Sridhar Ratnakumar · Answer

确保服务器配置以处理大文件上传

public void ConfigureServices(IServiceCollection services)
{
    services.Configure(options =>
    {
        // 将表单数据的多部分主体长度限制设置为100MB
        options.MultipartBodyLengthLimit = 104857600;
    });
}

使用CopyToAsync方法复制流

private async Task OnChange(InputFileChangeEventArgs e)
{
    foreach (var item in e.GetMultipleFiles())
    {
        // 创建与文件大小相等的缓冲区
        var buffer = new byte[item.Size];
        // 打开读取流
        var readStream = item.OpenReadStream(item.Size);
        
        // 创建目标文件流，此处用于保存到C盘test目录下的image.jpg
        using (var fileStream = File.Create(@"C:	est\image.jpg"))
        {
            // 异步将读取流的内容复制到目标文件流
            await readStream.CopyToAsync(fileStream);
        }
    }
}

Nina Scholz · Answer

您可以尝试以下代码，它与您当前的代码非常相似。为了便于理解，loadedFiles只是一个列表，其中包含了放入InputFile元素中的项目/图片。我这里仅选取了loadedFiles[0]作为示例。希望这对您有所帮助。

private async Task ShowCase()
{
    // 这里仅针对测试用例，对您而言，此处应当替换为您实际获取的item
    IBrowserFile fi = loadedFiles[0];

    // 创建一个内存流来存储文件内容
    MemoryStream stream = new MemoryStream();
    
    // 异步将文件流复制到内存流中
    await fi.OpenReadStream(fi.Size).CopyToAsync(stream);

    // 将内存流转换为字节数组
    byte[] imageBytes = stream.ToArray();

    // 将字节数组写入指定路径的文件中
    await File.WriteAllBytesAsync($@"C:\您的\路径\{fi.Name}", imageBytes);
}

Ryan Lundy · Answer

虽然来晚了一些，但带来了一些想法。有时，您可能无法直接在“c:/”路径下写入文件，这需要获取提升权限（例如以管理员身份运行应用）。如果将路径更改为用户文件夹，则不会遇到此问题。

另一个问题是，对于非常大的文件，可能无法通过一次调用ReadAsync方法完成读取，这时需要使用循环逐块读取。

最后，如果不打算将文件内容转换至内存中处理，我不建议使用字节缓冲区。可以直接将内容写入文件，避免浪费内存。

另外，我分享一下解决这个问题的代码片段：



@code {
  private async Task OnImageSelected(InputFileChangeEventArgs fileArgs)
  {
      IBrowserFile selectedImage = fileArgs.File;
      string imageName = selectedImage.Name;

      using Stream inputStream = fileArgs.File.OpenReadStream(fileArgs.File.Size);

      // 使用提供的文件名创建新文件，并指定与输入流相同的长度
      using FileStream outputStream = File.Create($@"C:\{imageName}.jpg", (int)inputStream.Length, FileOptions.None);

      // 异步将输入流的内容复制到新创建的文件中
      await inputStream.CopyToAsync(outputStream);
  }
}

对于同时处理多个文件的情况，实现上与此相差不大。