Layui图片上传组件使用指南

末蓝、 2023-07-04 08:54 7阅读 0赞

### 前言 ###

Layui是一套非常棒的前端框架，页面简约美观，关键是非常容易上手，在开发中也是很多项目的首选。之前用Layui做过开发，现在整理一下Layui的文件上传组件，Layui上传组件页面效果看起来非常舒服，简约美观。之前也用过Bootstrap的上传组件，这两款上传组件平分秋色，各有各的特点，总而言之，都是很实用而且很美观的上传组件，想了解BootStrap上传组件的请移步：[BootStrap FileInput 文件上传组件使用指南][BootStrap FileInput]。下面来一起看看Layui上传组件的基本用法吧。

### 效果图 ###

**初始状态**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]  
**选择图片后**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]

### 引入插件的样式文件 ###

**官网地址：[https://www.layui.com/][https_www.layui.com]**

### 单图片上传 ###

**先在页面上添加标签文件，用于显示**

<div class="layui-upload-drag" id="ongImg">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
    </div><br>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="imgSave">上传</button>

如果设置的是选择图片后就自动上传，就不用定义button按钮，这里是选择后不上传，点击按钮后上传所以定义了有一个按钮。  
**JS加载与上传图片代码**

layui.use('upload', function() { 
        var upload = layui.upload;
        upload.render({ 
            elem: '#ongImg',
            url: 'imgSave',
            auto: false,    //是否自动上传
            accept: 'images',   //指定允许上传的文件类型
            bindAction: '#imgSave',  //指向一个按钮触发上传
            //选择文件后的回调函数
            choose: function(obj){ 
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。
                obj.preview(function(index, file, result){ 
                    console.log(index); //得到文件索引
                    console.log(file); //得到文件对象
                    console.log(result); //得到文件base64编码，比如图片
                    //图片插入到选择框中，
                    $("#ongImg").html("<img src = '"+result+"' width='200px;' />");
                });
            },
            //上传完成后回调，res为服务器端返回的数据
            done: function(res){ 
                //关闭loading
                layer.close(index);
            }
        });
    });

上面渲染时只设置了部分属性，文章最下面有Layui上传的全部参数属性。  
auto设置选择图片后是否自动上传。  
accept设置指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）。  
bindAction设置指定按钮触发上传事件，和auto结合使用。  
choose选择文件后回调函数。  
将选择的图片插入选择框中显示。

$("#ongImg").html("<img src = '"+result+"' width='200px;' />");

done上传完成后回调函数  
url指定上传的路径。  
imgSave后台对应上传图片保存的方法，代码如下。

@RequestMapping(value = "/imgSave")
    @ResponseBody
    public Boolean imgSave(MultipartFile file) { 
        String uuid = UUID.randomUUID().toString()+".jpg";
        Boolean bool = fileService.saveFile(file, uuid);
        return bool;
    }

其中saveFile方法为后台上传方法，返回Boolean类型参数。代码如下。

// 图片存放位置
    private final static String IMAGEPATH = "e:\\layui\\image";
    
    //保存图片
    @Transactional
    public boolean saveFile(MultipartFile file, String uuid) { 
        try { 
            File path = path(file.getContentType());
            String filename = file.getOriginalFilename();
            FileImg fileEntity = new FileImg();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            Date date = new Date();
            fileEntity.setFileName(filename);
            fileEntity.setUuid(uuid);
            String storeaddress = path.getAbsolutePath();
            fileEntity.setStoreaddress(storeaddress);
            File saveFile = new File(path, uuid);
            try { 
                fileRepository.save(fileEntity);
                file.transferTo(saveFile);
                return true;
            } catch (IllegalStateException | IOException e) { 
                e.printStackTrace();
                return false;
            }
        } catch (Exception e) { 
            System.out.println("图片保存异常");
            return false;
        }
    }
    
    //图片地址是否存在
    private File path(String filename) { 
        File pat = new File("e:\\layui");
        File path = new File(FileService.IMAGEPATH);
        if (!pat.isDirectory()) { 
            pat.mkdir();
        }
        if (!path.isDirectory()) { 
            path.mkdir();
        }
        return path;
    }

**上述代码就是单图片上传了，下面是效果图。**  
选中文件前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]  
选择文件后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]

### 多图片上传 ###

上面是单图片上传，下面来看一下多图片上传。  
**先在页面上添加标签文件，用于显示**

<div class="layui-upload">
        <button type="button" class="layui-btn" id="imgs">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="imgsShow"></div>
        </blockquote>
    </div>

**JS加载与上传图片代码**

layui.use('upload', function() { 
        var upload = layui.upload;
        upload.render({ 
    	    elem: '#imgs',
         	accept: 'images',   //指定允许上传的文件类型
          	url: 'imgSave', //改成您自己的上传接口
          	multiple: true, //是否允许多文件上传
          	//选择文件后的回调函数
          	choose: function(obj){ 
              	//预读本地文件示例，
              	obj.preview(function(index, file, result){ 
                 	$('#imgsShow').append('<img src="'+ result +'" alt="'+ file.name +'" width="200px;">')
              	});
          	},
          	done: function(res){ 
             	//上传完毕
          	}
      	});
    });

Layui多图片上传如果不是自动上传，指定按钮上传，只会发送一次请求，也就是只会保存一张图片。所以这里设置的是选择图片后自动上传。如果有解决方法，欢迎下方留言交流。  
属性设置和后台上传方法imgSave都和单图片上传一样。  
**上述代码就是单图片上传了，下面是效果图。**  
选择文件前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5]  
选择文件后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 6]

### Layui上传的全部参数属性 ###

<table> 
 <thead> 
  <tr> 
   <th>参数选项</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>elem</td> 
   <td>指向容器选择器，如：elem: ‘#id’。也可以是DOM对象</td> 
   <td>string/object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>服务端上传接口，返回的数据规范请详见下文</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>请求上传接口的额外参数。如：data: {id: ‘xxx’}</td> 
   <td>object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>headers</td> 
   <td>接口的请求头。如：headers: {token: ‘sasasas’}。注：该参数为 layui 2.2.6 开始新增</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>accept</td> 
   <td>指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）</td> 
   <td>string</td> 
   <td>images</td> 
  </tr> 
  <tr> 
   <td>acceptMime</td> 
   <td>规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: ‘image/*’（只显示图片文件）</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>acceptMime: ‘image/jpg, image/png’（只显示 jpg 和 png 文件）</td> 
   <td>string</td> 
   <td>images</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>exts</td> 
   <td>允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: ‘zip |rar |7z’ 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式</td> 
   <td>string</td> 
   <td>jpg |png |gif |bmp |jpeg</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传</td> 
   <td>boolean</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>bindAction</td> 
   <td>指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: ‘#btn’</td> 
   <td>string/object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>field</td> 
   <td>设定文件域的字段名</td> 
   <td>string</td> 
   <td>file</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>设置文件最大可允许上传的大小，单位 KB。不支持ie8/9</td> 
   <td>number</td> 
   <td>0（即不限制）</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是否允许多文件上传。设置 true即可开启。不支持ie8/9</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>设置同时可上传的文件数量，一般配合 multiple 参数出现。</td> 
   <td>number</td> 
   <td>0（即不限制）</td> 
  </tr> 
  <tr> 
   <td>drag</td> 
   <td>是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9</td> 
   <td>boolean</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

**回调**

<table> 
 <thead> 
  <tr> 
   <th>参数选项</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>choose</td> 
   <td>选择文件后的回调函数。返回一个object参数，详见下文</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>before</td> 
   <td>文件提交上传前的回调。返回一个object参数（同上），详见下文 function -</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>done</td> 
   <td>执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

[BootStrap FileInput]: https://blog.csdn.net/qq_40205116/article/details/104214400
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200210154057361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021010520240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200210154122588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[https_www.layui.com]: https://www.layui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200210124653465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200210124632626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200210154533424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200210154524524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70