3 Star 18 Fork 5

flechazo / multipleUpload

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 3.68 KB
一键复制 编辑 原始数据 按行查看 历史
flechazo 提交于 2023-12-27 05:51 . update README.md.

multipleUpload

介绍

基于Layui上传组件的多图上传解决方案,更高效的图片列表操作,默认带删除、查看操作,可自定义操作按钮传入,支持获取上传实例及上传之后的图片列表数据,支持layui的upload组件的各项回调及参数配置,自定义操作按钮支持事件点击回调处理

使用说明

 // 先定义一个容器
 <div id="test"></div>

// 示例代码 仅供参考

layui.config({ base: 'js/modules/' }).extend({
  multipleUpload: 'multipleUpload/multipleUpload'
}).use(['form', 'multipleUpload'], function() {

    var $ = layui.$, 
      form = layui.form, 
      multipleUpload= layui.multipleUpload;
      
    var ins = multipleUpload.render({
          elem: '#test', // 你定义的容器id
          upload_url: '/common/upload-img', // 你的实际图片上传地址
          upload_choose:function (obj) {}, // 同upload choose回调,非必传
          upload_before:function (obj) {}, // 同upload before回调,非必传
          upload_error:function (index, upload) {}, // 同upload  error 回调,非必传
          upload_done: function (res, index, callback) { // 上传成功回调,必传,在处理自身的逻辑之后需要执行回调函数传入图片地址
             callback(res.data,res.data.extra); 第二个参数是额外参数用于上传服务端所需参数
          },
          uploadConfig: {}, layui上传组件参数按照layui upload组件参数传递即可默认是空对象
          unshift: true, // 上传图片是否启用头部插入,默认是从图片列表尾部插入,添加按钮始终在头部,传true标识每次新增图片将会在添加按钮前面插入,添加按钮会后移
          hasDefaultBtn: true,// 是否需要默认按钮组,传入false不显示默认按钮组
          upload_limit:0, // 上传个数限制,默认为0,即为不限制
          className:'my_class', // 自定义class,会map到所有上传的图片item上,便于自定义操作
          error:(error)=> {
            
          }, // 上传限制报错,choose期间触发,便于自定义操作
          btn: [  // 图片操作按钮组,默认自带删除,查看按钮,非必传
            {
                name: '点击1',
                icon: 'layui-icon-add1',
                on: function(){
                   console.log('我被点击了') 
                }
            },
            {
                name: '点击2',
                icon: 'layui-icon-add1',
                on: function() {
                   console.log('我被点击了') 
                }
            }
          ],
          data: [  // 初始化图片列表,多用于修改页面回显图片数据,非必传
             {
                index: '1',
                url: '/upload/20201208/1607398502q-UF01G3niVdnRvB5217.jpg',
                extra:{}, // 额外参数用于上传服务端所需参数
             },
             {
                index: '1',
                url: '/upload/20201208/1607398502q-UF01G3niVdnRvB5217.jpg',
                extra:{}, // 额外参数用于上传服务端所需参数
             }
          ],
          parseData: function(data) { // 处理data参数的格式的回调函数,data数据格式需要和上述例子相同,非必传
              return data;
          }
    })
    
    var images = ins.getUploadImages(); //获取上传的图片数组
    var uploadIns = ins.getUploadInstance(); //获取upload上传实例![输入图片说明](https://images.gitee.com/uploads/images/2021/0108/175808_bd7518de_1476573.png "屏幕截图.png")
});
JavaScript
1
https://gitee.com/JerryZst/multipleUpload.git
git@gitee.com:JerryZst/multipleUpload.git
JerryZst
multipleUpload
multipleUpload
master

搜索帮助