Layui图片上传组件使用指南(1)

单图片上传

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



点击上传，或将文件拖拽到此处

上传

如果设置的是选择图片后就自动上传，就不用定义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(“”);

});

},

//上传完成后回调，res为服务器端返回的数据

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’, //指定允许上传的文件类型