组件/表单组件

EUpload 上传

import EUI 1.0

示例与代码

上传

此示例需要选择本地文件及配置上传服务，请在 Gallery 中运行。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EUpload { id: webFormUpload action: "https://your-server.example/upload" autoUpload: false drag: true accept: ".txt,.json,.png,.jpg" limit: 3 maxFileSize: 5 * 1024 * 1024 data: {folder: "documents"} method: "POST" beforeUpload: function(file) { return file.size <= 5 * 1024 * 1024 } } EButton { text: "Upload queue" onClicked: webFormUpload.submit() } }

目录选择与附加数据

此示例需要选择本地文件及配置上传服务，请在 Gallery 中运行。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EUpload { id: webUploadDirectory directory: true width: Math.min(520, parent.width) data: function(file) { return {relativePath: file.relativePath} } httpRequest: function(request) { Qt.callLater(function() { request.onSuccess("Received: " + request.data.relativePath) }) } triggerDelegate: Component { EButton { property var uploadControl iconSource: EIcons.FOLDER text: qsTr("选择文件夹") onClicked: uploadControl.open() } } tipDelegate: Component { EText { wrapMode: Text.WordWrap text: qsTr("递归列出可读的普通文件并保留 relativePath；不跟随符号链接。附加数据可同步返回或返回 Promise。") } } } EButton { text: qsTr("提交目录文件") enabled: !webUploadDirectory.uploading onClicked: webUploadDirectory.submit() } }

照片墙、插槽与手动队列

此示例需要选择本地文件及配置上传服务，请在 Gallery 中运行。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EUpload { id: webUploadWall width: Math.min(520, parent.width) listType: "picture-card" limit: 6 accept: "image/*" fileList: [{url: "qrc:/example/images/gallery/lake.jpg", name: "lake.jpg", status: "ready"}, {url: "qrc:/example/images/gallery/tree.jpg", name: "tree.jpg", status: "ready"}, {url: "qrc:/example/images/gallery/ocean.jpg", name: "ocean.jpg", status: "ready"}] httpRequest: function(request) { let cancelled = false Qt.callLater(function() { if (!cancelled) { request.onProgress(100) request.onSuccess("Demo upload completed") } }) return {abort: function() { cancelled = true }} } tipDelegate: Component { EText { wrapMode: Text.WordWrap text: qsTr("可预览、移除、重试；此处使用模拟上传，接入服务时设置 action 或 httpRequest。") } } defaultDelegate: Component { Row { spacing: 8 EButton { text: qsTr("上传全部") enabled: !webUploadWall.uploading onClicked: webUploadWall.submit() } EButton { text: qsTr("取消") onClicked: webUploadWall.abort() } EButton { text: qsTr("清空完成项") onClicked: webUploadWall.clearFiles(["success"]) } } } onPreviewed: webUploadStatus.text = qsTr("预览：") + file.name } EText { id: webUploadStatus text: qsTr("点击缩略图查看文件信息") } }

上传

此示例需要选择本地文件及配置上传服务，请在 Gallery 中运行。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EUpload { limit: 5 width: 520 action: uploadUrl.text }

属性

属性说明取值与默认值

acceptstring

允许的文件类型，如 image/* 或扩展名列表。

默认值""

actionstring

HTTP(S) 上传地址。

默认值""

autoUploadbool

选择文件后自动上传；需同时设置 action 或自定义请求。

默认值false

beforeRemovevar

删除前检查，返回 false 可阻止删除，支持 Promise。

默认值null

beforeUploadvar

上传前检查，返回 false 可阻止上传，支持 Promise。

默认值null

datavar

随文件一起提交的 multipart 额外字段对象。

默认值({})

defaultDelegateComponent

自定义默认上传区的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

directorybool

允许选择目录。

默认值false

dragbool

启用文件拖放选择区域。

默认值false

enabledbool

是否允许交互；false 时控件禁用。

默认值true

fieldNamestring

multipart 文件字段名；name 为 fieldName 的兼容接口。

默认值"file"

fileDelegateComponent

自定义文件列表项的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

fileListvar

选中文件的数据数组，包含文件信息及上传进度。

字段：
url, name, size
status, error, percentage

默认值[]

headersvar

上传请求头对象。

默认值({})

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

httpRequestvar

自定义上传请求函数，接收上传上下文与成功、失败、进度回调。

默认值null

lastErrorstring

最近一次操作失败的说明。

默认值""

limitint

允许的文件数量上限。

0：不限制
正数：限制值

默认值0

listTypestring

已选文件列表的展示样式。

"text" / "picture"
"picture-card"

默认值"text"

maxFileSizeint

单个文件大小上限，单位为字节。

0：不限制
正数：限制值

默认值0

methodstring

上传请求方法，通常为 POST。

默认值"POST"

multiplebool

是否允许多选。

默认值true

namealias

multipart 文件字段名；name 为 fieldName 的兼容接口。

默认值别名：control.fieldName

nameFiltersvar

原生文件对话框过滤器数组，如 Images (*.png *.jpg)。

默认值随当前语言变化

pictureCardSizeint

图片卡片尺寸，单位为像素。

默认值144

showFileListbool

显示已选文件列表。

默认值true

tipDelegateComponent

自定义上传提示的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

triggerDelegateComponent

自定义上传触发区的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

withCredentialsbool

自定义上传请求上下文中的凭证开关；原生网络行为由 Qt 处理。

默认值false

effectiveLanguagestring只读

当前配置作用域实际采用的语言代码。

默认值由运行时计算

uploadingbool只读

当前是否存在正在上传的文件。

默认值由运行时计算

信号

签名作用

removed(var file)

文件从列表移除后触发，file 为被移除文件。

previewed(var file)

请求预览文件时触发，file 为待预览文件。

selected(var files)

选择文件后触发，files 为本次选择的文件集合。

rejected(string message)

文件未通过接收限制时触发，message 为拒绝原因。

changed(var file, var files)

文件状态或文件列表变化时触发，file 为当前文件，files 为完整列表。

failed(var file, string message)

上传失败时触发，file 为失败文件，message 为错误信息。

exceeded(var files, var fileList)

选择文件超出数量限制时触发，files 为本次选择，fileList 为已有文件列表。

progress(var file, real percentage)

上传进度更新时触发，file 为上传文件，percentage 为当前进度百分比。

succeeded(var file, string response)

上传成功时触发，file 为上传文件，response 为服务端响应。

方法

签名作用

handleStart(file)

将 file 加入待上传列表。

handleRemove(file)

从上传列表移除 file。

open()

打开系统文件选择对话框。

clearFiles(statuses)

清除文件列表；传入 statuses 时只清除对应状态的文件。

submit()

上传列表中等待上传的文件。

updateProgress(file, percentage)

更新 file 的上传进度，percentage 为百分比。

addDirectories(urls)

将 urls 指定目录中的文件加入上传列表。

abort(file)

中止 file 对应的上传任务。

cancel()

取消当前上传请求。

removeFile(index)

移除 index 对应的上传文件。

addFiles(urls)

将 urls 指定的本地文件加入上传列表。

upload(index)

上传 index 对应的文件。