# multipleUpload

**Repository Path**: JerryZst/multipleUpload

## Basic Information

- **Project Name**: multipleUpload
- **Description**: 更优雅的照片墙上传组件，基于Layui上传组件的多图上传解决方案，更高效的图片列表操作，默认带删除、查看操作，可自定义操作按钮传入，支持获取上传实例及上传之后的图片列表数据，支持layui的upload组件的各项回调及参数配置，自定义操作按钮支持事件点击回调处理
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 6
- **Created**: 2020-12-08
- **Last Updated**: 2024-11-26

## Categories & Tags

**Categories**: web-dev-toolkits

**Tags**: None

## README

# multipleUpload

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

#### 使用说明

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

```
```javascript

// 示例代码 仅供参考

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")
});