上传 (Upload)

上传文件组件。

概述

附件上传

代码演示

1.默认示例

附件1：

附件2：

附件3：

附件4：

导入附件

namespace WebSite.Docus.Inputs.Uploads;

class Upload1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Upload>("附件1：", "Upload1").Build();
        builder.Field<Upload>("附件2：", "Upload2")
               .Set(f => f.IsMultiple, true)
               .Build();
        builder.Field<Upload>("附件3：", "Upload3")
               .Set(f => f.Accept, "image/jpeg,image/png")
               .Build();
        builder.Field<Upload>("附件4：", "Upload4")
               .Set(f => f.IsButton, true)
               .Set(f => f.ButtonText, "导入附件")
               .Build();
    }
}

2.事件示例

附件1：

附件2：

using Microsoft.AspNetCore.Components.Forms;

namespace WebSite.Docus.Inputs.Uploads;

class Upload2 : BaseComponent
{
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Upload>("附件1：", "Upload1")
               .ValueChanged(OnValueChanged)
               .Set(f => f.OnFilesChanged, OnFilesChanged)
               .Build();
        builder.Field<Upload>("附件2：", "Upload2")
               .ValueChanged(OnValueChanged)
               .Set(f => f.IsMultiple, true)
               .Set(f => f.OnFilesChanged, OnFilesChanged)
               .Build();
        builder.Div("tips", message);
    }

    private void OnValueChanged(string value)
    {
        message = value;
        StateChanged();
    }

    private void OnFilesChanged(List<IBrowserFile> list)
    {
        foreach (var item in list)
        {
            message += $"大小：{item.Size}";
        }
        StateChanged();
    }
}

3.控制示例

可见

可用

只读

附件：

namespace WebSite.Docus.Inputs.Uploads;

class Upload3 : BaseComponent
{
    private Upload? upload;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<Upload>("附件：", "Upload").Build(value => upload = value);
    }

    private void OnVisibleChanged(bool value) => upload?.SetVisible(value);
    private void OnEnabledChanged(bool value) => upload?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => upload?.SetReadOnly(value);
    private void SetValue() => upload?.SetValue("孙膑");
    private string? GetValue() => upload?.Value;
}