更新记录

1.1.0（2022-08-05）

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

1..0.10（2022-08-05）

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

1.0.9（2022-08-05）

增加了页面加载后，已选择文件的回显；
增加了已选择文件删除功能；
优化了已选择文件的单个文件修改、替换功能；

平台兼容性

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-popup、uni-file-picker）。

使用指南

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

参数说明

显式调用

显示样式：见右侧截图：图一、图二（显示自带的资源选择按钮，并接受显示已选择的资源）

<!-- ------- 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