MudBlazor技术问题：如何在MudTable中正确使用InputFile？

问题根源 #

你遇到的问题本质是HTML中id必须唯一——所有行的InputFile都用了fileInput这个重复id，浏览器解析时只会绑定第一个匹配的元素，导致后续行的上传按钮都触发第一个InputFile。

最优方案：为每行InputFile生成唯一ID #

直接给每行的InputFile和对应的MudButton（作为label）分配唯一id，比如利用每行数据的唯一标识（比如aa.Id）来生成：

修改后的RowTemplate代码：

<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>
            <!-- 用数据的唯一ID生成InputFile的唯一id -->
            <InputFile id="fileInput-@aa.Id" 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-@aa.Id"> <!-- 对应唯一id -->
                Upload Image
            </MudButton>
        </div>
    </MudTd>
    <MudTd>
        <MudIconButton OnClick="@(()=>DeleteAnswer(aa))" Icon="@Icons.Filled.Delete" />
    </MudTd>
</RowTemplate>

如果你的数据没有自带唯一ID，也可以用MudTable行的索引（需确认你的MudTable版本支持上下文索引）：

<InputFile id="fileInput-@context.Index" ... />
<MudButton for="fileInput-@context.Index" ... />

替代方案：通过引用手动触发InputFile #

不需要依赖id绑定，给每个InputFile添加引用，点击按钮时手动触发它的点击事件：

<RowTemplate Context="aa">
    <MudTd DataLabel="Image">
        <div>
            <MudImage Src="@aa.ImageBase64" Height="50" Width="50" Elevation="25" Class="rounded my-2"></MudImage>
            <InputFile @ref="@(inputFiles[aa.Id])" OnChange="@((e)=> OnFileChange(aa,e))" hidden multiple accept=".jpg, .jpeg, .png"/>
            <MudButton Variant="Variant.Filled" Color="Color.Primary"
                   StartIcon="@Icons.Filled.CloudUpload"
                   OnClick="@(()=> inputFiles[aa.Id].Click())">
                Upload Image
            </MudButton>
        </div>
    </MudTd>
    <!-- 其他列代码 -->
</RowTemplate>

然后在代码块中定义字典存储InputFile引用：

private Dictionary<int, InputFile> inputFiles = new Dictionary<int, InputFile>();

这种方案避免了id冲突，适合数据有唯一标识的场景。

总结 #

第一种方案（唯一ID）是最直接的HTML规范解决方案，代码改动最小；第二种方案（手动触发）更灵活，无需处理id，适合复杂场景。根据你的数据结构选择即可。

内容的提问来源于stack exchange，提问作者Marlon Dumal-is