{"id":20515646,"url":"https://github.com/vartruexuan/upload-more","last_synced_at":"2026-03-13T22:36:00.156Z","repository":{"id":212580825,"uuid":"693557443","full_name":"vartruexuan/upload-more","owner":"vartruexuan","description":"layui组件,单/多图片,支持拖拽,图片数量限制","archived":false,"fork":false,"pushed_at":"2025-03-05T03:09:02.000Z","size":310,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-08T19:15:12.828Z","etag":null,"topics":["layui","layui-upload","upload","upload-more","uploadmore"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vartruexuan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-19T09:06:40.000Z","updated_at":"2025-06-29T15:15:03.000Z","dependencies_parsed_at":"2023-12-15T03:54:19.051Z","dependency_job_id":"464c8e64-ffd4-43af-9bdc-381447fcb929","html_url":"https://github.com/vartruexuan/upload-more","commit_stats":null,"previous_names":["vartruexuan/upload-more"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/vartruexuan/upload-more","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vartruexuan%2Fupload-more","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vartruexuan%2Fupload-more/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vartruexuan%2Fupload-more/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vartruexuan%2Fupload-more/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vartruexuan","download_url":"https://codeload.github.com/vartruexuan/upload-more/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vartruexuan%2Fupload-more/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30478202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T20:45:58.186Z","status":"ssl_error","status_checked_at":"2026-03-13T20:45:20.133Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["layui","layui-upload","upload","upload-more","uploadmore"],"created_at":"2024-11-15T21:23:49.562Z","updated_at":"2026-03-13T22:36:00.125Z","avatar_url":"https://github.com/vartruexuan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003euploadMore\n\u003c/h1\u003e\n\n\u003ca href=\"https://github.com/layui/layui\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/badge/layui-^2.8.17-red.svg?maxAge=2592000\" alt=\"Yii Version\" data-canonical-src=\"https://img.shields.io/badge/yii-~2.0.14-red.svg?maxAge=2592000\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n# 概述\n- 多文件上传组件 (支持拖拽排序/预览/拖拽上传)\n- 拖拽排序依赖组件 [sortablejs](http://www.sortablejs.com/)\n\n[github](https://github.com/vartruexuan/upload-more)\n[gitee](https://gitee.com/vartruexuan/upload-more)\n\n# 在线预览\n[在线预览](https://stackblitz.com/edit/stackblitz-starters-s7w41y?file=index.html)\n# 使用\n- html\n```html\n\u003cform class=\"layui-form\" lay-filter=\"form-goods\"\u003e\n    \u003cdiv class=\"layui-form-item\"\u003e\n        \u003clabel class=\"layui-form-label\"\u003e多图片上传:\u003c/label\u003e\n        \u003cdiv class=\"layui-input-block\"\u003e\n            \u003cdiv id=\"image-upload\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n- js\n```javascript\nlayui.config({\n    // 生成环境时:前填写固定版本,例如v1.0.1,迭代发版请依次叠加..\n    version: true, // 更新组件缓存，设为true不缓存，也可以设一个固定值\n    base: 'extends/', // 组件目录,指定组件项目组件位置即可\n}).extend({\n    uploadMore: 'uploadMore/uploadMore',\n    // 拖拽排序组件\n    sortable: 'uploadMore/sortable',\n}).use(['uploadMore'], function () {\n    var uploadMore = layui.uploadMore;\n    var $ = layui.jquery;\n    // 多图片\n    var uploadMoreObj = uploadMore.render({\n        //容器对象\n        elem: '#image-upload',\n        // 限制数量 0 无限制\n        maxNum: 5,\n        concurrencyMaxNum: 0,// 并发处理数 0无限制 (配置将进行分批上传)\n        uploadBtnStatus: 1, // 1.一直显示(默认)  2.没有成员时显示 3.隐藏\n        style: {\n            size: 120, // 成员尺寸\n            /**\n             - 日落橙主题 (theme-sunset)\n             - 深海蓝主题 (theme-deepsea)\n             - 玫瑰金主题 (theme-rosegold)\n             - 雾灰主题 (theme-mist)\n             - 森林绿主题 (theme-forest)\n             - 薰衣草紫主题 (theme-lavender)\n             - 珊瑚橙主题 (theme-coral)\n             - 午夜紫主题 (theme-midnight)\n             - 苍穹蓝主题 (theme-skyblue)\n             */\n            theme: 'default', \n        },\n        // 成员操作按钮配置 (默认都有)\n        operation: {\n            'update': true, // 编辑\n            'preview': true, // 预览\n            'delete': true // 删除\n        },\n        // 初始化数据(支持对象方式/字符串)\n        initValue: [\n            'https://xxx.com/xx.png',\n            {\n                url: 'https://xxx.com/xx.png',\n            },\n        ],\n        // 事件监听\n        on: {\n            // 添加成员\n            add: function (itemInfo, obj) {\n                console.log('添加');\n            },\n            // 删除成员\n            del: function (itemInfo, obj) {\n                console.log('删除');\n            },\n            // 上传成功回调\n            success: function (itemInfo, obj) {\n                console.log('成功');\n            },\n            // 上传失败回调\n            error: function (itemInfo, obj, errorMsg) {\n                console.log('失败');\n            },\n        },\n\n        // 数据解析\n        parseData: function (res) {\n            return {\n                code: res.code, // 状态码（此处按0成功）\n                message: res.msg || '', // 返回信息\n                fileInfo: res.data.info, // 文件完整信息\n                url: res.data \u0026\u0026 res.data.info ? res.data.info.url : '', // 文件地址\n                mimeType: res.data \u0026\u0026 res.data.info ? res.data.info.mimeType : '', // 文件mime类型\n            };\n        },\n\n        // 上传配置\n        upload: {\n            // 参考组件 layui.upload \u003chttps://layui.dev/docs/2/upload/\u003e\n            field: 'file',\n            data: {\n                type: 'files',\n            },\n            acceptMime: 'image/*', //限制类型\n            url: '/mock/upload.json', // 实际为项目上传地址\n            size: 20000, // 限制文件大小\n        },\n        // 拖拽排序能力配置, false 关闭排序\n        sortable: {\n            // 参考组件 sortable.js \u003chttp://www.sortablejs.com/\u003e\n            // 无特殊需求不建议配置\n        },\n\n    });\n    // 获取文件url地址集合\n    var fileUrls = uploadMoreObj.getFileUrls();\n    // 获取文件信息集合\n    var fileInfos = uploadMoreObj.getFileInfos();\n\n});\n\n```\n- 全局配置  `uploadMore.set(opt)`\n```javascript\n // 针对上传组件做全局配置\nuploadMore.set({\n    parseData: function (res) {\n        return {\n            \"code\": res.code, // code 码 (0 成功)\n            \"msg\": res.msg,   // 消息\n            \"fileInfo\": res.data \u0026\u0026 res.data.info ? res.data.info : null,  // 数据\n            \"url\": res.data \u0026\u0026 res.data.info ? res.data.info.url : '',// 图片地址\n        };\n    },\n    upload: {\n        field: 'file',\n        data: {\n            type: 'files',\n        },\n        acceptMime: 'image/*',//限制类型\n        url: admin.getApiFullUrl('/index/upload'),//上传地址\n        size: 20000,// 限制文件大小\n    }\n});\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvartruexuan%2Fupload-more","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvartruexuan%2Fupload-more","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvartruexuan%2Fupload-more/lists"}