vk-unicloud 快速开发框架

# 25、file-select 素材库选择

# 效果图

# 万能表单使用方式

{ key: "image1", title: "多选图片", type: "file-select", placeholder: "请选择图片", fileType: "image", multiple: true, multipleLimit: 6, imageFit:"cover" },
1

# API

# 公共属性

点击查看『公共属性』 (opens new window)

# 组件属性

参数 说明 类型 默认值 可选值
fileType 文件类型 String image image、video、other
multiple 是否可多选 Number - -
multipleLimit 最大多选数量 Number 9 -
defaultCategory 默认显示哪个分类下的素材（分类ID） String - -
upload 是否允许上传 Boolean true false
updateCategory 是否允许编辑分类 Boolean true false
imageFit 图片显示模式 详细介绍 (opens new window) String cover fill、contain、cover、none、scale-dow
cloudDirectory 上传至指定的云端目录（默认会以年月日为目录） String - -

# 万能表格使用方式

 { key: "image", title: "图片", type: "image", width: 120 },
1

# template 使用方式

<vk-data-input-file-select v-model="image1" placeholder="请选择图片" multiple :multiple-limit="9" file-type="image" image-fit="cover"></vk-data-input-file-select>
1

# 注意：

# 需确保有以下云函数（如没有，则从新版本中拷贝）

  1. admin/system_uni/uni-id-files/files/kh/delete
  2. admin/system_uni/uni-id-files/files/kh/getList
  3. admin/system_uni/uni-id-files/files/kh/update
  4. admin/system_uni/uni-id-files/categories/kh/getList
  5. admin/system_uni/uni-id-files/categories/sys/add
  6. admin/system_uni/uni-id-files/categories/sys/delete
  7. admin/system_uni/uni-id-files/categories/sys/update
  8. user/kh/addUploadRecord

# 若需要使用 素材管理，则还需要进行以下操作

# 1、拷贝目录 /pages_plugs/system_uni/uni-id-files/（如果没有，则从新版本中拷贝）

# 2、在pages.json 中的子包 pages_plugs 添加 { "path": "system_uni/uni-id-files/list" }

# 3、导入 动态菜单

  • 1、打开admin后台，进入用户角色权限 - 菜单管理

  • 2、点击 通过json导入菜单 选择

  • 3、粘贴下面的数组

[
  {
    "menu_id": "system_uni",
    "name": "系统设置",
    "icon": "el-icon-s-tools",
    "sort": 110,
    "children": [{
        "menu_id": "system-uni-uni-id-files",
        "name": "素材管理",
        "icon": "el-icon-folder-opened",
        "url": "/pages_plugs/system_uni/uni-id-files/list",
        "sort": 0
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  • 4、导入

  • 5、刷新页面，点击系统设置-素材管理（如果是非admin账号，则需要授权才能看到）

注意：前端 vk.uploadFile 带参数 needSave: true 时，上传的图片记录会保存到admin后台，可在 素材管理 中查看

← 26、icon 图标选择 →