.net - Mudblazor - 如何在 MudTable 上使用 InputFile？

Question

我正在尝试为使用 MudTable 显示的对象列表的每个元素添加图像上传功能。以下是我尝试的方法:

<MudTable Items="Data" Dense="true">
    <HeaderContent>
        <MudTh>Value</MudTh>
        <MudTh>Image</MudTh>
        <MudTh>Delete</MudTh>
    </HeaderContent>
    <RowTemplate Context="aa">
        <MudTd DataLabel="Value">
            <MudTextField @bind-Value="@aa.Value" For="@(()=>aa.Value)" HelperText="Required" />
        </MudTd>
        <MudTd DataLabel="Image">
            <div>
                <MudImage Src="@aa.ImageBase64" Height="50" Width="50" Elevation="25" Class="rounded my-2"></MudImage>
                <InputFile id="fileInput" OnChange="@((e)=> OnFileChange(aa,e))" hidden multiple accept=".jpg, .jpeg, .png"/>
                <MudButton HtmlTag="label"
                       Variant="Variant.Filled" Color="Color.Primary"
                       StartIcon="@Icons.Filled.CloudUpload"
                       for="fileInput">
                    Upload Image
                </MudButton>
            </div>
        </MudTd>
        <MudTd>
            <MudIconButton OnClick="@(()=>DeleteAnswer(aa))" Icon="@Icons.Filled.Delete" />
        </MudTd>
    </RowTemplate>
</MudTable>

Mudblazor 的文件上传实现的特点是它使用带有特定 id 的隐藏 InputFile。因此，如果我将其放在表格上，则该 InputFile 的实例仅对第一个元素有效，因此，如果单击第二个元素的“上传图像”按钮，则被修改的将是第一个元素，不是当前的第二个元素。

我知道我应该将 InputFile 放在 MudTable 之外，但问题是，我需要在 OnChange 上传递每个元素的实例InputFile 的 code> 事件。 我想到的另一种选择是不将 Upload Image Button 与 InputFile 链接，而是在单击按钮时将当前元素的实例传递给变量。然后手动调用隐藏的InputFile的点击事件。但我想避免这种情况，那么有什么建议可以更好地做到这一点吗？

Answer 1

您可以为表中的每个行项目定义一个InputFile。请务必使用唯一的 id 和 for 值:

<RowTemplate>
  ...
  <MudTd DataLabel="Image">
    <InputFile
      id="@($"file-{context.Id}")"
      OnChange="@(e => this.UploadFiles(e, context))"
      hidden
      multiple />
    <MudFab
      HtmlTag="label"
      Color="@Color.Success"
      Icon="@Icons.Filled.AttachFile"
      Size="@Size.Small"
      for="@($"file-{context.Id}")"/>
  </MudTd>
</RowTemplate>

工作演示:

<MudTable Items="@this.items" Class="mt-5">

  <HeaderContent>
    <MudTh>Id</MudTh>
    <MudTh>Name</MudTh>
    <MudTh>Images</MudTh>
    <MudTh></MudTh>
  </HeaderContent>

  <RowTemplate>
    <MudTd DataLabel="Id">
      @context.Id
    </MudTd>
    <MudTd DataLabel="Name">
      @context.Name
    </MudTd>
    <MudTd DataLabel="Images">
      @context.Images
    </MudTd>
    <MudTd DataLabel="Image">
      <InputFile
        id="@($"file-{context.Id}")"
        OnChange="@(e => this.UploadFiles(e, context))"
        hidden
        multiple />
      <MudFab
        HtmlTag="label"
        Color="@Color.Success"
        Icon="@Icons.Filled.AttachFile"
        Size="@Size.Small"
        for="@($"file-{context.Id}")"/>
    </MudTd>
  </RowTemplate>

</MudTable>

@code {
  private List<Item> items = new();
  private List<IBrowserFile> files = new();

  protected override void OnInitialized()
  {
    this.items = new List<Item>
    {
      new() { Id = "123", Name = "something" },
      new() { Id = "456", Name = "another" }
    };
  }

  private void UploadFiles(InputFileChangeEventArgs e, Item item)
  {
    item.Images = string.Join(", ", e.GetMultipleFiles().Select(f => f.Name));
  }

  public class Item
  {
    public string Id { get; set; }

    public string Name { get; set; }

    public string Images { get; set; } = string.Empty;
  }
}

在线尝试:https://try.mudblazor.com/snippet/wumGuBvXQJffyjIA