文件选取器

QFile是一个处理用户交互以选取文件的组件。

TIP

如果您还希望组件也为您处理上载,请考虑改用QUploader

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

设计

WARNING

对于QFile,您只能使用其中一个主要设计(filledoutlinedstandoutborderless)。不能使用多个,因为它们是自排它的。

Design Overview

装饰

Decorators

着色

Coloring

可清除的

作为辅助,您可以使用clearable属性,这样用户可以通过附加的图标将模型重置为null。下面示例中的第二个QFile相当于使用clearable

Clearable

禁用和只读

Disable and readonly

用法

WARNING

实际上,QFile使用本地输入。由于浏览器安全策略,不允许以编程方式使用值填充此类输入。因此,即使您将v-model从开始设置为一个值,组件也会显示这些文件,但输入标签本身不会用该值填充。用户交互(单击/点击/ENTER键)绝对需要,以便本地输入包含它们。最好始终将model的初始值设置为nullundefined/void 0

基础

Single file
Multiple files

附加文件

默认情况下,每次用户通过弹出窗口选择任何文件时,QFile都会替换模型。但是,当您接受多个文件(multiple属性)时,您可以更改此行为并将新选择的文件附加到模型中,而不是替换其旧值。

在下面,您可以多次选取文件,QFile将继续将它们附加到模型中:

Appending files

计数器

Basic counter
Counter label

使用chips

With chips

使用文件插槽

下面的示例重点介绍如何自定义每个文件的显示,甚至包括可能的上传进度指示器:

With progress indicator

限制文件

Basic restrictions

你甚至可以把上面的限制结合起来。

TIP

在上面的示例中,我们使用的是accept属性。它的值必须是唯一文件类型说明符的逗号分隔列表。映射到本地input type=file元素的“accept”属性。更多信息

WARNING

accept属性的建议格式为<mediatype>/<extension>。示例:“image/png”、“image/png”。 QFile在幕后使用了一个<input type="file">,它完全依赖于主机浏览器来触发文件选择器。如果accept 属性(应用于输入)不正确,则不会在屏幕上显示文件选取器,或者它将显示但将接受所有文件类型。

还可以应用自定义过滤器(在用户选取文件后执行):

Filter

本地表单提交

当处理具有actionmethod的原生形式时(例如,使用Quasar和ASP.NET控制器),则需要在QFile上指定name属性,否则formData将不包含它(如果应该的话):

Native form

QFile API

Loading API...
Please wait...