联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
前端显示zip源码结构,类似官方应用插件及模板的源码结构
类型:迅睿CMS 更新时间:2024-04-02 11:19:42 上传文件

放到的位置: 根目录/config/custorm.php

解决的问题:前端上传的文件压缩包不解压缩的前提下,获取zip的目录展示出来,

例如 :官方的插件及模板详情页面的源码结构


需注意:个人使用的方式是 把阿里云oss  通过ossfs  挂载使用 需一点运维知识 阿里云教程:https://help.aliyun.com/document_detail/32195.html

腾讯云cosfs: 宝塔有免费的插件


大致实现:

1、首先要 新建一个字段:down 用来做上传用(这里用的阿里云云存储,不是本地存储)

image

2、先获取上传文件的路径(通过官方标签获取路径,然后截断路径 加上本地挂载的路径 我这里挂载在www/wwwroot/tmp/,自己挂载路径不同,需自行改)

3、设置缓存名称 md5加密一下 ,缓存路径(www/wwwroot/tmp/cache)这里缓存也放在云存储,生成的文件大约也就几十kb,还不如一个图片大,再加上缓存的过期时间

4、通过ziprchive类获取 zip目录的结构,获取结构时要记得转码,不然中文可能因为centos的原因,默认没中文,这里有的是 iconv ,php扩展不一定自带,可能需要手动安装一下,也有其他方式转码(自行解决)

5、在创建一个函数 生成树(默认是根据字母排序,会导致文件夹不优先显示,这里做了判断,优先显示文件夹)

image







回帖
  • 又菜又爱玩
    #1楼    又菜又爱玩
    2023-03-13 10:14:41
    Chrome 0
    ********此内容需要回复后才能看到********
    后端代码 有注释
  • 又菜又爱玩
    #2楼    又菜又爱玩
    2023-03-13 10:16:01
    Chrome 0
    前端调用代码: {generateHtmlTree($down)} 使用的是jstree.js 自行下载调用代码:
    <script>
      $(document).ready(function() {
        function generateIconObject() {
          const icons = [
            ['default', 'bx  bxs-file-blank'],
            ['folder', 'bx bx-folder'],
            ['doc', 'bx bxs-file-word text-primary'],
            ['docx', 'bx bxs-file-word text-primary'],
            ['xls', 'bx bxs-file-excel text-success'],
            ['xlsx', 'bx bxs-file-excel text-success'],
            ['ppt', 'bx bxs-file-powerpoint text-danger'],
            ['pptx', 'bx bxs-file-powerpoint text-danger'],
            ['pdf', 'bx bxs-file-pdf text-danger'],
            ['html', 'bx bxl-html5 text-warning'],
            ['css', 'bx bxl-css3 text-primary'],
            ['scss', 'bx bxl-sass text-primary'],
            ['js', 'bx bxl-javascript text-warning'],
            ['json', 'bx bxs-file-json text-success'],
            ['php', 'bx bxl-php text-primary'],
            ['py', 'bx bxl-python text-success'],
            ['rb', 'bx bxl-ruby text-danger'],
            ['java', 'bx bxl-java text-warning'],
            ['sql', 'bx bx-data text-danger'],
            ['xml', 'bx bx-code-alt text-primary'],
            ['csv', 'bx bxs-file-csv text-warning'],
            ['jpg', 'bx bx-image text-success'],
            ['jpeg', 'bx bx-image text-success'],
            ['png', 'bx bx-image text-success'],
            ['gif', 'bx bx-image text-success']
          ];
    
          const types = {};
    
          icons.forEach(icon => {
            types[icon[0]] = {
              'icon': icon[1]
            };
          });
    
          return types;
        }
    
        $('#jstree-basic').jstree({
          'plugins': ['types'],
          'types': generateIconObject()
        });
      });
    </script>
  • 远策
    #3楼    远策
    2023-05-22 14:32:25
    Chrome 0
    又菜又爱玩 学习一下学习一下
  • 远策
    #4楼    远策
    2023-05-22 14:32:45
    Chrome 0
    又菜又爱玩 学习一下学习一下
  • 远策
    #5楼    远策
    2023-05-22 14:54:49
    Chrome 0
    学习一下学习一下
  • 学习狂人
    #6楼    学习狂人
    2024-03-26 09:23:00
    Chrome 0
    学习一下学习一下
  • 爱客
    #7楼    爱客
    2024-04-02 00:02:43
    Chrome 0
    学习一下了
  • 学习狂人
    #8楼    学习狂人
    2024-04-02 11:19:42
    Chrome 0
    学习一下学习一下