Layui图片上传组件使用指南

前言

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

效果图

初始状态

选择图片后

引入插件的样式文件

官网地址：https://www.layui.com/

<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/js/jquery.js"></script>
<script src="static/layui/layui.js"></script>

单图片上传

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

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

上述代码就是单图片上传了，下面是效果图。
选中文件前

选择文件后

多图片上传

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

<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都和单图片上传一样。
上述代码就是单图片上传了，下面是效果图。
选择文件前

选择文件后

Layui上传的全部参数属性

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

回调

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