upload 上传

在线示例

upload 支持用户上传文件。能显示上传进度以及每个文件的状态。文件可以通过点击 Upload files（上传文件） 按钮或者拖拽的方式上传。

  • XML 元素：upload

  • Java 类：JmixUpload

基本用法

upload 的示例：

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

XML 属性

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

autoUpload

Vaadin

设置组件是否在选择了文件之后立刻上传。

当设置为 false 时，则添加文件后不会立刻上传。

默认值为 true。

dropLabel

Vaadin

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

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

dropLabelIcon

Vaadin

设置引导用户拖放文件的图标。

maxFiles

Vaadin

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

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

receiverFqn

Vaadin

设置一个接收器（Receiver）的实现，用于接收 upload 组件上传的文件。

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

receiverType

Vaadin

指定 Receiver 实现的类型。支持：

  • MemoryBuffer

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

  • MultiFileMemoryBuffer

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

  • FileTemporaryStorageBuffer

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

  • MultiFileTemporaryStorageBuffer

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

默认接收类型为 MemoryBuffer。

事件和处理器

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

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

AllFinishedEvent

Vaadin

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

FailedEvent

Vaadin

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

FileRejectedEvent

Vaadin

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

@ViewComponent
private JmixUpload upload;

@Autowired
private Notifications notifications;

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

FinishedEvent

Vaadin

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

ProgressUpdateEvent

Vaadin

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

StartedEvent

Vaadin

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

SucceededEvent

Vaadin

com.vaadin.flow.component.upload.SucceededEvent 当组件成功接收文件时发送。

receiver

Vaadin

设置 upload 组件使用的接收器。参考 receiverFqn 和 receiverType 属性。

参考

Vaadin 文档