Layui图片上传组件使用指南

done: function(res){

//关闭loading

layer.close(index);

}

});

});

上面渲染时只设置了部分属性，文章最下面有Layui上传的全部参数属性。

auto设置选择图片后是否自动上传。

accept设置指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）。

bindAction设置指定按钮触发上传事件，和auto结合使用。

choose选择文件后回调函数。

将选择的图片插入选择框中显示。

$(“#ongImg”).html(“”);

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;

}

上述代码就是单图片上传了，下面是效果图。

选中文件前

选择文件后

多图片上传

上面是单图片上传，下面来看一下多图片上传。

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

多图片上传

预览图：

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(‘’)

});

},

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 |

回调