绑定在 Blazor 中使用 InputFile 选择的文件

Question

我正在尝试在 BlazorInputFile组件中数据绑定一些用户选择的文件，特别AssociatedFiles是每个ToDoItem. 这不起作用，因为AssociatedFiles总是null.

这是我的剃须刀组件：

@page "/todo"

@using BlazorPlayground.Data

<h3>Todo List</h3>
Total items: @todos.Count()
<br />
Done: @todos.Count(x => x.IsDone) out of @todos.Count()
<br />
Not Done: @todos.Count(x => !x.IsDone) out of @todos.Count()
<br />

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
            <input type="datetime-local" @bind="todo.DateAdded" />
            <InputFile OnChange="@OnFileSelected" @bind-value="todo.AssociatedFiles" multiple  />
        </li>
    }
</ul>


<input placeholder="Write something to do..." @bind="newTodo" />
<button @onclick="AddTodo">Add Todo Item</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!String.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem(newTodo));
            newTodo = "";
        }
    }

    private void OnFileSelected(InputFileChangeEventArgs e)
    {
    }
}

这是我的ToDoItem课：

namespace BlazorPlayground.Data
{
    public class TodoItem
    {
        public string Title { get; set; }
        public bool IsDone { get; set; }
        public DateTime DateAdded { get; set; }
        public IReadOnlyList<IBrowserFile> AssociatedFiles {get; set;}

        public TodoItem(string title)
        {
            this.Title = title;
            this.IsDone = false;
            this.DateAdded = DateTime.Now;
        }
    }
}

顺便说一句，您可能已经注意到，这是Blazor 待办事项列表应用教程的扩展。

Answer 1

以前从未这样做过，但我想这应该可行......

<InputFile OnChange="@((InputFileChangeEventArgs args) => OnFileSelected(args, todo))" multiple  />

获取选中的文件，并将其添加到AssociatedFiles当前TodoItem对象的字段中

private void OnFileSelected (InputFileChangeEventArgs e, TodoItem todo)
{
    var selectedFiles = e.GetMultipleFiles();
    todo.AssociatedFiles = selectedFiles;
    this.StateHasChanged();
}

更新

我对 Web 开发还很陌生，我不知道您可以将匿名函数传递给 OnChange 属性。

这是一个 lambda 表达式...

我认为你应该在那里输入方法的名称。

InputFile 组件公开一个 EventCallback 属性，如下所示：

[参数] public EventCallback OnChange { get; 放; }

通常，您将事件处理程序的名称分配给 property 属性，如下所示：

<InputFile OnChange="OnInputFileChange" multiple />

并像这样使用它：

private void OnInputFileChange (InputFileChangeEventArgs e)
{
     selectedFiles = e.GetMultipleFiles();
     message = $"{selectedFiles.Count} file(s) selected";
     this.StateHasChanged();
}

您可以使用 lambda 表达式作为 OnChange 属性的值，如下所示...但在这种情况下，您有责任将参数传递InputFileChangeEventArgs给事件处理程序 ( OnInputFileChange)

<InputFile OnChange="@((InputFileChangeEventArgs args) => 
                                   OnInputFileChange(args))" multiple  />

这当然是多余的，而且是多余的。但是，如果您想将第二个参数传递给事件处理程序，就像您的问题一样，那么这种方法是正确的。