qm-vnit-vueUploadFile 文件上传
文件上传控件，支持同时上传多个文件
何时使用
- 单独使用，也可以嵌套在 FormItem 表单控件中使用（无需再次封装）
开发者注意事项
- 对于一般无需用户登录凭证的可以直接使用，如需登陆凭证可以通过 headers 传递给组件
代码演示
案例一
vue
<script setup lang="ts">
import { ref } from 'vue';
import { UploadFile } from '@/library';
import img1 from '@/assets/images/1.jpg';
const fileList = ref([{ uid: '1', name: 'default_1', url: img1 }]);
const headers = ref({
Authorization: 'Bearer 2d66abed-0ccd-426e-9512-54fa32f20b8d',
});
</script>
<template>
<UploadFile
v-model:fileList="fileList"
multiple
listType="picture"
action="/v1.0/file/upload"
:maxCount="10"
:headers="headers"
/>
</template><script setup lang="ts">
import { ref } from 'vue';
import { UploadFile } from '@/library';
import img1 from '@/assets/images/1.jpg';
const fileList = ref([{ uid: '1', name: 'default_1', url: img1 }]);
const headers = ref({
Authorization: 'Bearer 2d66abed-0ccd-426e-9512-54fa32f20b8d',
});
</script>
<template>
<UploadFile
v-model:fileList="fileList"
multiple
listType="picture"
action="/v1.0/file/upload"
:maxCount="10"
:headers="headers"
/>
</template>案例二
vue
<script setup lang="ts">
import { ref, watch } from 'vue';
import { UploadFile } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import { UploadOutlined } from '@ant-design/icons-vue';
const fileList = ref([
{ uid: '1', name: 'default_1', url: img1 },
{ uid: '2', name: 'default_2', url: img2 },
]);
const headers = ref({
Authorization: 'Bearer 2d66abed-0ccd-426e-9512-54fa32f20b8d',
});
watch(fileList, () => {
console.log(fileList);
});
</script>
<template>
<UploadFile
v-model:fileList="fileList"
multiple
listType="picture-card"
action="/v1.0/file/upload"
:maxCount="10"
:headers="headers"
>
<UploadOutlined />上传附件
</UploadFile>
</template><script setup lang="ts">
import { ref, watch } from 'vue';
import { UploadFile } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import { UploadOutlined } from '@ant-design/icons-vue';
const fileList = ref([
{ uid: '1', name: 'default_1', url: img1 },
{ uid: '2', name: 'default_2', url: img2 },
]);
const headers = ref({
Authorization: 'Bearer 2d66abed-0ccd-426e-9512-54fa32f20b8d',
});
watch(fileList, () => {
console.log(fileList);
});
</script>
<template>
<UploadFile
v-model:fileList="fileList"
multiple
listType="picture-card"
action="/v1.0/file/upload"
:maxCount="10"
:headers="headers"
>
<UploadOutlined />上传附件
</UploadFile>
</template>UploadFile API
| propName | description | type | default value |
|---|---|---|---|
| action | 上传的路径 | string | - |
| accept | 指定上传的文件类型 | string | * |
| maxSize | 限制图片的大小，0 表示不限制 | number | - |
| maxCount | 最多可以上传多少个图片，0 表示不限制 | number | - |
| multiple | 是否支持多张图片上传 | boolean | true |
| disabled | 是否禁用 | boolean | - |
| headers | 上传时携带的请求头 | object | - |
| fileList(v-model) | 文件列表 | UploadChangeParam["fileList"] | - |
| listType | 上传列表的内建样式 | text，picture，picture-card，picture-circle | text |