文件选择器

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

TIP

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

QFile API

Loading QFile API...

Design

WARNING

您只能给 QFile 使用一种主要的外观设计款式(filled, outlined, standout, borderless),不能使用多个,因为它们是互相排斥的。




装饰




着色




可清除的

作为辅助,您可以使用 clearable 属性,这样用户可以通过附加的图标将数据重置为 null。下面第二个示例等价于使用 clearable




禁用和只读




用法

WARNING

在底层,QFile 使用原生 input 标签。由于浏览器安全策略,不允许以编程方式使用值填充此类输入。因此,即使您将 v-model 从开始设置为一个值,组件虽然也会显示这些文件,但 input 标签本身不会用该值填充。一定要用户主动交互(单击/点击/ 按下 ENTER/按下SPACE),原生 input 标签才能够包含被选中的文件。最好将 model 的初始值设置为 nullundefined/void 0

基础







追加文件

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

在下面,您可以多次选取文件,QFile 将继续将它们追加到 model 数据中:




计数器







使用 chips




使用文件插槽

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




限制文件格式




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

TIP

在上面的示例中,我们使用的是 accept 属性。其值必须是以逗号分隔的唯一文件类型说明符列表。映射到原生 input type=file 标签的 ‘accept’ 属性。更多信息

WARNING

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

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




原生表单提交

当处理一个带有 actionmethod 的原生表单时(如:使用 Quasar 和 ASP.NET 控制器时),您需要为 QFile 声明 name 属性,否则表单数据中不会包含它:




类型定义

export interface QRejectedEntry {
  failedPropValidation:
    | "accept"
    | "max-file-size"
    | "max-total-size"
    | "filter"
    | "max-files"
    | "duplicate";
  file: File;
}

export type QFileNativeElement = Omit<
  Omit<HTMLInputElement, "files"> & { files: FileList },
  "type"
> & { type: "file" };