更新记录

1.1.0(2022-08-05)

优化同页面多个组件时出现的问题;
增加显式、隐式组件的功能,便于不同场景使用;
优化说明文档;

1..0.10(2022-08-05)

优化已选择资源占位符过多的问题

查看更多

平台兼容性

阿里云 腾讯云
Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
3.5.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

uni-admin插件通用教程:

uni-admin是一套基于uniCloud的开源应用管理端系统。详见:uni-admin 基础框架
本插件是uni-admin系统的扩展插件,为开发者的admin系统添加功能。
需先确保本机有uni-admin项目,然后将此插件导入到uni-admin项目下。
如本机没有uni-admin项目,需要先在HBuilderX中新建项目 -> uni-app项目 -> 选择uni-admin模板。
如本机的uni-admin项目版本过老,可能无法使用新插件,需及时升级本机的uni-admin项目。详见uni-admin项目更新日志


old-static-admin

介绍:

背景:项目所需,所以封装了这个简单的后台针对静态资源文件的管理器

功能介绍:集中管理后台的资源文件,统一上传、使用、删除,为了方便管理,也为了付费模式下的云服务空间的云存储资源浪费

原理:每次使用资源文件时,打开管理器,集中上传至云存储,并存储资源地址至数据库,使用资源文件时,只需查询数据库中对应的资源记录即可,删除资源时,删除数据库记录后,也删除云存储中对应的资源

安装指南

1、对已关联云服务空间的unicloud admin项目,导入本插件(uni_modules)

2、找到/uni_modules/old-static-admin/uniCloud/cloudfunctions/old-static-admin云函数,右键上传部署

3、找到/uni_modules/old-static-admin/uniCloud/database/old-static-admin.schema.json,上传schema文件

4、本插件基于组建(uni-popupuni-file-picker)。

使用指南

本组件可同一页面多次使用,多个组件时,请注意组件标识:ref、属性:staticList、hide_mod以及回调函数@selectedfile的区分

参数说明

属性名 类型 必填 默认值 可选值 说明
staticList Array [] 已使用文件的url数组 页面加载时,从云端获取
hide_mod Boolean false true、false 当前组件显示模式:true:显示原资源选择按钮;false:隐藏原资源选按钮(用于按钮、富文本等资源文件选择使用)
use_limit Number 5 需注意数据表schema文件的maxlength 当前位置可使用文件数量
up_limit Number 9 1-9 单次可上传的文件数量
use_type(已弃用) String comm 任意字符串 模式标识符,不使用组件模式时传入,用于标识手动调用
file_type String all all、image、audio、video 目前支持管理的文件类型
@selectedfile Function 选择文件后回调函数:返回当前所选择的资源文件

显式调用

显示样式:见右侧截图:图一、图二(显示自带的资源选择按钮,并接受显示已选择的资源)

<!-- ------- template ------- -->
<template>
<view>
<!-- 注意:此处limit需要配合数据库schema中的maxLength -->
<!-- imgData为当前页面从云端加载的已使用资源的url数组,可为空:imgData:[] -->
<old-static-admin ref="old_static_admin" :hide_mod='false' :staticList='imgData'  :use_limit="2"  :up_limit="3" file_type="all"  @selectedfile="confirmChoosefile">
</view>
</template>
<!-- ------- js ------- -->
<script>
export default {
data() {
return {
imgData: ['https://v...b.png','https://v...b.png']
}
},
methods: {
//获取最终选择结果,并处理
confirmChoosefile: function(e) {
console.log(e)
console.log(e)
console.log(e.data) //:(array)已选文件的url
console.log(e.rawdata) //:(array)已选文件的原始数据
this.imgData = e.data
},
}
}
</script>

隐式调用

显示样式:见右侧截图:图三、图四(隐藏自带的资源选择按钮,自行处理已选择的资源)


<!-- ------- template ------- -->
<template>
<view>
<!-- 注意:此处limit需要配合数据库schema中的maxLength -->
<!-- imgData为当前页面从云端加载的已使用资源的url数组,可为空:imgData:[] -->
<old-static-admin ref="old_static_admin" :hide_mod='true' :staticList='imgData1'  :use_limit="2"  :up_limit="3" file_type="all"  @selectedfile="confirmChoosefile1">
<!-- 富文本编辑框 -->
<view class="container">
<!-- //... -->
<view class="iconfont icon-charutupian" @tap="insertImage()"></view>
<!-- //... -->
</view>
</view>
</template>
<!-- ------- js ------- -->
<script>
export default {
data() {
return {
imgData1: []
}
},
methods: {
//点击富文本选择图片按钮,打开资源管理器,开始选择资源
insertImage() {
//传入模式标识符
this.$refs.old_static_admin.chooseImg()
}
//选择结束后,进入回调,获取最终选择结果,并处理
confirmChoosefile1: function(e) {
// console.log(e)
console.log(e.data) //:(array)已选文件的url
// console.log(e.rawdata)//:(array)已选文件的原始数据
this.imgData1 = []  //将上次的选择置空
e.data.map(item => {
//这里以富文本编辑框为例,循环插入
this.editorCtx.insertImage({
src: item,
alt: '图像',
success: function() {
console.log('insert image success')
}
})
//。。。
})
        }
    }
}


回调函数返回值格式:

```js
//返回值包含二个参数:data、rawdata
//data:当前已选资源的url数组(array),格式如下
[
    'https://v...b.png', 
    'https://v...1.png'
]
//rawdata:当前已选资源的原始数据数组(array),格式如下
 [{
    "_id": "62ec81b67ab3bd000137e27d",
    "file": {
        "extname": "png",
        "fileType": "image",
        "image": {
            "width": 2600,
            "height": 2600,
            "location": "blob:http://localhost:8082/f...9"
        },
        "name": "一张图片.png",
        "path": "blob:http://localhost:8082/f...9",
        "size": 79228,
        "fileID": "https://v...b.png",
        "url": "https://v...b.png"
    },
    "createTime": 1659666869604,
    "size": "77.37KB"
}]

操作使用方法

具体的使用可查看右侧截图,或运行示例

项目示例包使用说明(含富文本使用):

1、下载示例包,使用Hbuilder X开发工具打开;

2、关联云服务空间,并运行云服务空间初始化向导(上传云函数、公共模块,初始化数据库)

3、打开pages/index/indexx(左侧菜单项:首页),页面即可体验插件

若存在后台账号密码:admin-123123

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问