- 基于 NUpload 封装
类型定义
ts
/**
* 文件列表类型
* @property name 文件名
* @property url 文件路径
*/
interface FileInfo {
/** 文件名 */
name: string;
/** 文件路径 */
url: string;
}ts
/**
* 移除文件类型
* @property idx 文件索引
* @property name 文件名
* @property url 文件路径
*/
interface RemoveFile {
/** 文件名 */
name: string;
/** 文件路径 */
url: string;
/** 文件索引 */
idx: number;
}基本使用
vue
<template>
<UploadFile
:value="imgUrl"
:limit="1"
@upload="(val) => (imgUrl = val.url)"
@remove="imgUrl = ''"
/>
</template>
<script setup lang="ts">
const imgUrl = ref<string>(""); // 图片地址，字符串类型
</script>vue
<template>
<UploadFile
:value="imgUrls"
@upload="(val) => imgUrls.push(val.url)"
@remove="
(val) => {
if (imgUrls[idx] === val.url) {
imgUrls.splice(idx, 1);
}
}
"
/>
</template>
<script setup lang="ts">
const imgUrls = ref<string[]>([]); // 图片地址，数组类型
</script>💡 提示
这仅是一个普通用法，更多用法请查看 案例
Props
| 名称 | 类型 | 必传 | 默认值 | 说明 |
|---|---|---|---|---|
| value | string[]stringFileInfo[]FileInfo | 否 | [] | 文件列表 |
| data | Object | 否 | {} | 提交表单需要附加的数据 |
| name | String | 否 | file | 上传文件的参数名 |
| limit | Number | 否 | 10 | 文件上传数量限制 |
| max-file-size | Number | 否 | 10 | 单个文件的最大允许大小 |
| accept | String | 否 | image/* | 允许上传的文件类型，参考 accept |
| type | NUpload[list-type] | 否 | image-card | 文件列表的内建样式 |
| multiple | Boolean | 否 | true | 是否支持多选，在 limit 为 1 时无效 |
| drag | Boolean | 否 | false | 是否支持拖拽上传 |
| drag-options | DragOptions | 否 | DragOptions | 拖拽上传配置，仅在 drag 为 true 时有效 |
| 其他参数 | Upload-Props | 否 | NUpload 组件参数 |
DragOptions
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | String | ep:upload-filled | 图标 |
| iconSize | Number | 50 | 图标大小 |
| title | String | 点击此处 或 拖动文件到该区域进行上传 | 标题 |
Slots
| 属性 | 参数 | 说明 |
|---|---|---|
| default | () | 默认插槽，触发器等 |
Events
| 名称 | 类型 | 说明 |
|---|---|---|
| upload | (val: FileInfo) => val | 文件上传成功回调 |
| remove | (val: RemoveFile) => val | 移除文件回调 |
nuyoah