Skip to content

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 配置项

属性类型说明
propstring字段名
labelstring标签
bizTypestring业务类型
limitnumber最大文件数
acceptstring允许的文件类型
requiredboolean是否必填

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;
  }>;
}

Released under the MIT License.