Upload
文件上传组件,支持多文件上传、文件类型限制等功能。
配置 OSS API
Upload 组件需要配置 OSS API 才能正常工作:
typescript
import { setupPageTemplate } from "vue-admin-kit";
import { uploadOSS, deleteOSS } from "@/api/system/oss";
setupPageTemplate({
dependencies: {
oss: {
uploadOSS: async (file: File | FormData) => {
const formData =
file instanceof FormData
? file
: (() => {
const fd = new FormData();
fd.append("files", file);
return fd;
})();
const res = await uploadOSS(formData);
return {
url: res.data?.url || "",
fileName: res.data?.fileName || "",
ossId: res.data?.ossId || "",
};
},
deleteOSS: async (ossId: string | number) => {
const res = await deleteOSS(ossId);
return { code: res.code, msg: res.msg };
},
},
},
});表单配置
typescript
const formConfig = [
{
type: "upload",
prop: "attachments",
label: "附件",
uploadConfigList: [
{
prop: "files",
label: "上传文件",
bizType: "attachment",
limit: 5,
accept: ".pdf,.doc,.docx,.xls,.xlsx",
},
],
},
{
type: "uploadCard",
prop: "images",
label: "图片",
uploadConfigList: [
{
prop: "coverImage",
label: "封面图",
bizType: "cover",
limit: 1,
accept: ".jpg,.jpeg,.png,.gif",
},
],
},
];uploadConfigList 配置项
| 属性 | 类型 | 说明 |
|---|---|---|
prop | string | 字段名 |
label | string | 标签 |
bizType | string | 业务类型 |
limit | number | 最大文件数 |
accept | string | 允许的文件类型 |
required | boolean | 是否必填 |
OSS API 接口类型
typescript
interface OssApi {
uploadOSS(file: File | FormData): Promise<{
url: string;
fileName: string;
ossId?: string | number;
}>;
deleteOSS(ossId: string | number): Promise<{
code: number;
msg?: string;
}>;
}