kent-updata v2.0.6

使用说明 @1822967176@qq.com

一、需要的依赖

1.Vben admin 5 element-plus版本

2.compressorjs 压缩图片

二、暴露接口说明

const props = defineProps({
  //选择模式
  mode: {
    default: 'addMode',
    type: String as () => ModeType,
  },
  //文件格式
  listType: {
    default: null,
    type: Array,
  },
  //是否立刻上传
  autoUpload: {
    default: null,
    type: Boolean,
  },
  //是否可以删除文件
  delete_file: {
    default: null,
    type: Boolean,
  },
  //是否可以压缩文件
  compressFile: {
    default: null,
    type: Boolean,
  },
  // 限制上传文件数量
  limit: {
    default: null,
    type: Number,
  },
  // 上传地址
  action: {
    default: null,
    type: String,
  },
  //文件大小限制
  fileSize: {
    default: null,
    type: Number,
  },
  //当前配置输出开关
  outputConfig: {
    default: false,
    type: Boolean,
  },
});

模式选择说明

/**
 * 模式选择  :mode="addMode"
 * addMode 添加模式
 * editMode 编辑模式
 * readMode 只读模式
 * 默认选择addMode
 * 如果有配置其他暴露的可选项,优先使用可选项配置
 * 比如:autoUpload="true" 优先使用可选项配置
 * 在只读模式下autoUpload无效
 */
type ModeType = 'addMode' | 'editMode' | 'readMode';

// 模式配置
const modeConfig = {
  addMode: {
    list_type: [
      'image/jpeg',
      'image/png',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.ms-powerpoint',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ],
    auto_upload: false,
    delete_file: true,
    compress_file: false,
    limit: 10,
    action: 'http://localhost:5006/user/ElUpload',
    file_size: 10,
    echo_mode: false,
  },
  editMode: {
    list_type: [
      'image/jpeg',
      'image/png',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.ms-powerpoint',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ],
    auto_upload: false,
    delete_file: false,
    compress_file: false,
    limit: 10,
    action: 'http://localhost:5006/user/ElUpload',
    file_size: 10,
    echo_mode: true,
  },
  readMode: {
    auto_upload: false,
    list_type: [
      'image/jpeg',
      'image/png',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.ms-powerpoint',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ],
    delete_file: false,
    compress_file: false,
    limit: 10,
    action: '',
    file_size: 10,
    echo_mode: false,
  },
};
//模式说明
export type ModeConfiguration = {
  list_type: string[]; // 支持的文件类型（MIME 类型）
  auto_upload: boolean; // 是否文件立即上传
  delete_file: boolean; // 是否可以删除文件
  compress_file: boolean; // 是否可以压缩文件
  limit: number; // 最大上传文件数量
  action: string; // 上传地址（字符串格式）
  file_size: number; // 文件大小限制（单位：MB）
};

四、组件使用

//使用pnpm install kent-updata 安装组件

//在 bootstrap.ts中
import kentUpdata from "kent-updata" //导入组件
app.component('kentUpdata', kentUpdata);//注册组件

<template>
  <kentUpdata
    mode="addMode"
    action="http://localhost:5006/user/ElUpload"
    :delete_file="true"
    :outputConfig="true"
    :autoUpload="false"
  />
</template>