Layui 图片上传组件使用指南
如果设置的是选择图片后就自动上传，就不用定义 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 = n
ew 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){
//上传完毕
}
});
});
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论