QFile 是一个处理用户选择文件交互的组件。
¥QFile is a component which handles the user interaction for picking file(s).
提示
如果你还希望组件能够为你处理上传，请考虑使用 QUploader。
¥If you also want a component to handle the upload for you, please consider using QUploader instead.
设计(Design)
¥Design
警告
对于你的 QFile，你只能使用主要设计之一（filled、outlined、standout、borderless）。你不能使用多个边距，因为它们是自独占的。
¥For your QFile you can use only one of the main designs (filled, outlined, standout, borderless). You cannot use multiple as they are self-exclusive.
装饰器(Decorators)
¥Decorators
着色(Coloring)
¥Coloring
可清除(Clearable)
¥Clearable
作为辅助，你可以使用 clearable 属性，以便用户可以通过附加图标将模型重置为 null。以下示例中的第二个 QFile 相当于使用 clearable。
¥As a helper, you can use clearable prop so user can reset model to null through an appended icon. The second QFile in the example below is the equivalent of using clearable.
禁用并只读(Disable and readonly)
¥Disable and readonly
用法(Usage)
¥Usage
警告
在底层，QFile 使用原生输入。由于浏览器安全策略，不允许以编程方式向此类输入框填充值。因此，即使你从一开始就将 v-model 设置为一个值，组件也会显示这些文件，但输入标签本身不会被填充该值。为了使原生输入包含这些内容，用户交互（点击/轻触/ENTER 键/SPACE 键）是绝对必要的。最好始终将模型的初始值设置为 null 或 undefined/void 0。
¥Under the hood, QFile uses a native input. Due to browser security policy, it is not allowed to programmatically fill such an input with a value. As a result, even if you set v-model from the beginning to a value, the component will show those file(s) but the input tag itself won’t be filled in with that value. A user interaction (click/tap/ENTER key/SPACE key) is absolutely required in order for the native input to contain them. It’s best to always have the initial value of model set to null or undefined/void 0.
基本(Basic)
¥Basic
附加文件(Appending files)
¥Appending files
默认情况下，每次用户通过弹出窗口选择任何文件时，QFile 都会替换模型。然而，当你接受多个文件（multiple 属性）时，你可以更改此行为，并将新选择附加到模型，而不是替换其旧值。
¥By default, QFile replaces the model each time the user selects any files through the popup. However, when you are accepting multiple files (multiple prop) you can change this behavior and append the new selection to the model rather than replacing its old value.
下面你可以多次选择文件，QFile 会持续将它们附加到模型中：
¥Below you can pick files multiple times and QFile will keep on appending them to the model:
计数器(Counters)
¥Counters
使用 chip(Using chips)
¥Using chips
使用文件槽(Using file slot)
¥Using file slot
下面的示例重点介绍了如何自定义每个文件的显示，甚至可以包含一个上传进度指示器：
¥The example below highlights how you can customize the display of each file and even incorporate a possible upload progress indicator:
限制文件(Restricting files)
¥Restricting files
你甚至可以组合上述限制。
¥You can even combine the restrictions above.
提示
在上面的例子中，我们使用了 accept 属性。它的值必须是以逗号分隔的唯一文件类型说明符列表。映射到原生输入 type=file 元素的 ‘accept’ 属性。更多信息。
¥In the example above, we’re using accept property. Its value must be a comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element. More info.
警告
accept 属性的推荐格式为 <mediatype>/<extension>。示例：“image/png”, “image/png”.QFile 在底层使用 <input type="file">，并且完全依赖于主机浏览器来触发文件选择器。如果 accept 属性（应用于输入）不正确，则屏幕上不会显示文件选择器，或者虽然显示文件选择器，但它会接受所有文件类型。
¥Recommended format for the accept property is <mediatype>/<extension>. Examples: “image/png”, “image/png”. QFile uses an <input type="file"> under the hood and it relies entirely on the host browser to trigger the file picker. If the accept property (that gets applied to the input) is not correct, no file picker will appear on screen or it will appear but it will accept all file types.
你还可以应用自定义过滤器（在用户选择文件后执行）：
¥You can also apply custom filters (which are executed after user picks files):
原生表单提交(Native form submit)
¥Native form submit
处理具有 action 和 method 的原生表单时（例如，将 Quasar 与 ASP.NET 控制器一起使用时），你需要在 QFile 上指定 name 属性，否则 formData 将不会包含它（如果应该包含的话）：
¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QFile, otherwise formData will not contain it (if it should):