FileUpload

qxs-file-upload 是 @qxs-bns/components 里的文件上传组件，适合后台附件上传、活动资料提交、压缩包分发这类需要拖拽上传、文件格式限制和上传成功回调的场景。

基础用法

import '@qxs-bns/components/file-upload'

如果你已经全量引入：

import '@qxs-bns/components'

使用说明

qxs-file-upload 默认通过 upload-success 回抛上传结果；为了迁移旧版 Vue 事件，也会同时派发 on-success。
files、headers、data 这类对象属性建议通过 DOM property 传入，Vue 模板里写成 .prop。
默认上传区尺寸与 qxs-image-upload 对齐；如果宿主需要更大的附件拖拽区，可以通过 width、height 调整。
组件内部已经包含拖拽和点击上传入口，不需要宿主再额外包一层按钮。

常见场景

宿主接入示例

API

属性

Name	Description	Type	Default
`action`	上传地址	`string`	`''`
`headers`	请求头。推荐通过 property 传入	`Record<string, string>`	`undefined`
`data`	上传时附带的额外字段。推荐通过 property 传入	`Record<string, string \| Blob>`	`undefined`
`name`	文件字段名	`string`	`'file'`
`size`	单文件大小限制，单位 MB	`number`	`20`
`width`	上传区域宽度，单位 px	`number`	`160`
`height`	上传区域高度，单位 px	`number`	`90`
`max`	最大上传数量	`number`	`3`
`accept`	允许扩展名列表，逗号分隔	`string`	`'zip,rar'`
`files`	初始文件列表。推荐通过 property 传入	`Array<{ name: string, url?: string, file?: File }>`	`[]`
`notip`	是否隐藏默认提示区	`boolean`	`false`
`ext`	兼容旧版的扩展名数组入口，优先级高于 `accept`	`string[]`	`[]`

事件

Name	Description
`upload-success`	上传成功后触发，`detail` 包含 `response`、`file`、`files`、`items`
`on-success`	兼容旧版 Vue 监听写法的别名事件
`files-change`	文件列表变化时触发，`detail.items` 为当前列表

插槽

Name	Description
`tip`	自定义提示文案。未传时使用默认说明

CSS Parts

Part	Description
`container`	外层容器
`control`	拖拽 / 点击上传区域
`icon`	上传图标
`text`	上传文案
`list`	文件列表
`item`	单个文件项
`remove`	删除按钮
`status`	校验提示或上传结果提示
`tip`	默认提示区

常见问题

为什么推荐用 property 传 `files`、`headers`、`data`？

因为这些值都是对象，不适合序列化成 HTML attribute。
在 Vue 里写 .prop，在 React / 原生 HTML 里直接给 DOM 实例赋值，都会更稳定。

`upload-success` 和 `on-success` 有什么区别？

upload-success 是 WC 版主事件名。
on-success 只是兼容旧 Vue 写法的别名，新的宿主接入建议统一用 upload-success。

FileUpload ​

基础用法 ​

使用说明 ​

常见场景 ​

宿主接入示例 ​

API ​

属性 ​

事件 ​

插槽 ​

CSS Parts ​

常见问题 ​

为什么推荐用 property 传 files、headers、data？ ​

upload-success 和 on-success 有什么区别？ ​

相关文档 ​