lckt-server/plugin/picturelibrary

GVA 图库功能

手动安装方法

1.解压zip获得picturelibrary文件夹
2.将 picturelibrary/web/plugin/picturelibrary 放置在web/plugin下
3.将 picturelibrary/server/plugin/picturelibrary 放置在server/plugin下

执行如下注册方法

注册（手动自动都需要）

1. 前往GVA主程序下的initialize/router.go 在Routers 方法最末尾按照你需要的及安全模式添加本插件

PluginInit(PrivateGroup, picturelibrary.CreatePictureLibraryPlug())
到gva系统，角色管理，分配角色的api权限即可，插件会自动注册api，需要手动分配。
注：会生成一个表：sys_attachment_category，表exa_file_upload_and_downloads会新增一个cat_id字段

2. 配置说明

2-1 全局配置结构体说明

无配置

2-2 使用说明

在你需要图片选择的前端页面引入图库组件，如下：
  <div class="selected-images">
    <div class="selected-image" v-for="image in selectedImages" :key="image">
      <el-image v-if="fileTypeList.includes(image.tag) === true" :src="image.url" style="width: 100%; height: 100%; object-fit: cover;margin-right: 10px;"></el-image>
      <video v-else controls style="width: 100%; height: 100%;">
        <source :src="image.url" />
      </video>
      <span class="remove-icon" @click="removeSelectedImage(image)"><el-icon><circle-close></circle-close></el-icon></span>
    </div>
    <el-icon  v-if="isMultiple || selectedImages.length === 0" class="avatar-uploader-icon" @click="openImageLibrary"><Plus /></el-icon>
  </div>

图库弹窗：
  <el-dialog v-model="isDialogVisible" title="图片库" width="950px" destroy-on-close>
     <ImageLibrary @select="handleImageSelect" :multiple="isMultiple"/>
  </el-dialog>

js代码：
    import {CircleClose, Plus} from '@element-plus/icons-vue'
    import ImageLibrary from "@/plugin/picturelibrary/view/components/imageLibrary.vue";
    
    const isDialogVisible = ref(false)
    const isMultiple = ref(false) // 设置是否允许多选
    const selectedImages = ref([])
    
    const openImageLibrary = () => {
        isDialogVisible.value = true
    }
    const fileTypeList = ['png', 'jpg', 'jpeg', 'gif']
    const handleImageSelect = (images) => {
    if (isMultiple.value) {
        selectedImages.value = [...selectedImages.value, ...images]
    } else {
        selectedImages.value = Array.isArray(images) ? images : [images]
    }

    // 此处是测试项目里上传头像的参数，根据实际情况进行修改
    formData.value.avatar = selectedImages.value[0]
        isDialogVisible.value = false
    }
    
    const removeSelectedImage = (image) => {
        const index = selectedImages.value.indexOf(image)
        if (index !== -1) {
            selectedImages.value.splice(index, 1)
        }
    }

style代码：
    .selected-images {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
    
    .selected-image {
        position: relative;
        margin-right: 10px;
        margin-bottom:10px;
        width: 100px;
        height: 100px;
    }
    
    .selected-image .remove-icon {
        position: absolute;
        top: 0; /* 微调位置 */
        right: 0; /* 微调位置 */
        color: black;
        padding: 5px;
        cursor: pointer;
        font-size: 22px;
        line-height: 22px;
        text-align: center;
    }
    
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        text-align: center;
        border: 1px dashed #d4d9e1;
    }

2-3 参数说明

isMultiple 是控制能不能选择多张图的参数，false:只能选一张；true:可以选择多张

3. 方法API

无