upload 上传

upload 支持用户上传一个或多个文件,并显示每个文件的上传进度和状态。可以通过单击 Upload files 按钮或将文件拖放至组件进行上传。

XML 元素

upload

Java 类

JmixUpload

XML 属性

id - acceptedFileTypes - alignSelf - autoUpload - classNames - colspan - css - dropAllowed - dropLabel - dropLabelIcon - height - maxFileSize - maxFiles - maxHeight - maxWidth - minHeight - minWidth - receiverFqn - receiverType - uploadIcon - uploadText - visible - width

事件和处理器

AllFinishedEvent - AttachEvent - DetachEvent - FailedEvent - FileRejectedEvent - FinishedEvent - ProgressUpdateEvent - StartedEvent - SucceededEvent - receiver

基本用法

upload 的示例:

<upload id="upload"
        maxFiles="2"
        autoUpload="false"/>
upload basics

自动上传

autoUpload 属性设置组件是否在用户选择了文件之后自动上传,或者是需要用户主动触发上传。

  • 当设置为 true 时,文件会在选择后自动上传。此时会显示上传进度,用户还可以按需取消上传。

  • 当设置为 false 时,文件不会自动上传。用户必须点击 Upload 按钮开始上传。

默认值为 true

拖放

upload 组件支持拖放功能,用户可以从文件系统直接拖拽文件至该组件实现上传。

拖放功能默认开启。如需禁用,请设置 dropAllowed 属性为 false

dropLabel 属性设置组件中引导用户拖放文件的文本。

该属性的值可以是一个纯文本,或 消息包 中的一个键值。如果是键值,需要以 msg:// 开头。

dropLabelIcon 属性设置一个 dropLabel 文本旁边可以显示的图标。

<upload dropLabel="Drop files here to upload"
        dropLabelIcon="vaadin:cloud-upload-o"/>
upload drag drop

文件计数

默认情况下,upload 不限制用户可以上传的文件数量。可以通过 maxFiles 属性控制用户能上传的文件数。

设置允许用户上传的最大文件个数。如果设置为 1,则系统原生的文件选择器将不允许选择多个文件。

默认不会在 UI 显示文件上传的异常。请使用 FileRejectedEvent 捕捉异常,然后可以使用通知为用户展示异常。

@Autowired
private Notifications notifications;

@Subscribe("upload")
public void onUploadFileRejected(final FileRejectedEvent event) {
    notifications.create(event.getErrorMessage())
            .show();
}

接收器

receiverFqn 属性设置将会处理上传文件的 Java 类的全限定名称。该类必须实现 Receiver 接口。

如果接收器未实现 MultiFileReceiver,则 upload 组件自动设置为仅接受单文件上传。

receiverType 属性指定处理上传文件的接收器类型。决定如何处理并存储上传的文件。可以是:

  • MemoryBuffer

    一次只处理单个文件上传。将文件数据写入内存中。使用 MemoryBuffer 时,会自动将组件配置成仅能选择单文件上传。

  • MultiFileMemoryBuffer

    处理多个文件上传。将文件数据写入内存中。

  • FileTemporaryStorageBuffer

    一次只处理单个文件上传。将文件保存至 临时文件存储。使用 FileTemporaryStorageBuffer 时,会自动将组件配置成仅能选择单文件上传。

  • MultiFileTemporaryStorageBuffer

    处理多个文件上传。将文件数据写入内存中。将文件保存至 临时文件存储

默认接收类型为 MemoryBuffer

XML 属性

在 Jmix 中,所有组件都有一些作用一致的 通用属性

下面是 upload 的特殊属性:

名称

描述

默认值

autoUpload

设置组件是否在选择文件后自动上传。参阅 自动上传

true

dropLabel

设置组件中引导用户拖放文件的文本。参阅 拖放

dropLabelIcon

设置 dropLabel 的图标。用户可以拖放文件时该图标可见。参阅 拖放

maxFiles

设置允许上传的最大文件数量。参阅 文件计数

无限制

receiverFqn

设置 upload 组件使用的接收器的实现。参阅 接收器

receiverType

设置 Receiver 接口实现的类型。参阅 接收器

MemoryBuffer

事件和处理器

在 Jmix 中,所有组件都有一些 通用事件和处理器,可以按相同的方法设置。

下面是 upload 的特殊事件和处理器:

在 Jmix Studio 生成处理器桩代码时,可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加,也可以通过 CodeGenerate 菜单(Alt+Insert / Cmd+N)生成。

名称

描述

AllFinishedEvent

com.vaadin.flow.component.upload.AllFinishedEventupload 组件处理完队列中所有的文件之后发送,无论上传是否成功。

FailedEvent

com.vaadin.flow.component.upload.FailedEventupload 组件上传的文件被接收但由于某些原因中断时发送。

FileRejectedEvent

com.vaadin.flow.component.upload.FileRejectedEvent 当选择的文件不满足 upload 的要求时发送,例如,文件大小限制文件数量限制。参阅 See 文件数量

FinishedEvent

com.vaadin.flow.component.upload.FinishedEventupload 接收了文件后发送,不论是否成功。如需区别是否成功,请使用 SucceededEventFailedEvent,这两个都是 FinishedEvent 的子类。

ProgressUpdateEvent

com.vaadin.flow.component.upload.ProgressUpdateEvent 用于跟踪上传文件的进度。

StartedEvent

com.vaadin.flow.component.upload.StartedEventupload 开始接收文件时发送。

SucceededEvent

com.vaadin.flow.component.upload.SucceededEventupload 成功接收文件时发送。在示例应用程序中,有一个 示例 是在 com.vaadin.flow.component.upload.SucceededEvent 事件中通过 MultiFileMemoryBuffer 管理多个文件。

receiver

设置 upload 组件使用的接收器。[receiverFqn][receiverType] 属性。

参考