1. 简介
Layui是一款轻量级的前端框架，提供了丰富的UI组件和简单易用的API，非常适合用于快速搭建前端页面。其中包括了图片上传组件，我们可以通过使用Layui上传图片功能，实现图片上传成功后预览图片。
2. Layui图片上传组件
Layui上传组件提供了一个标准的图片上传功能，需要引入相应的JS文件和CSS文件。
2.1 引入组件文件
Layui官网提供了可供选择的两种方式引入组件文件：
// 引入layui.js
<script src="layui.js"></script>
// 引入核心组件file.js
<script src="layui.all.js"></script>
或者
// 引入layui.js
<link href="layui.css" rel="stylesheet">
// 引入核心组件file.css
<link href="layui.all.css" rel="stylesheet">
2.2 初始化上传组件
通过初始化方法laydate.render()实现上传组件的渲染和监听事件
//上传图片
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
3. 预览上传成功的图片
在Layui上传成功后，我们需要通过JavaScript代码实现图片的预览显示。这里借鉴了W3School的图片预览代码，这里展示了一种预览方式，可以在上传图片之后，将图片预览在<img>标签中。
3.1 HTML
这里构建了一个简单的上传界面，包括了一个<input>元素、一个<button>按钮和一个<img>标签，用于展示上传成功的图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="layui.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="updateBtn">
<i class="layui-icon"></i>上传图片
</button>
<input type="file" name="file" id="file" style="display: none"/>
<img src="" alt="上传图片预览" id="previewImg" style="display: none; width: 300px; height: 200px; padding: 10px;">
</div>
</body>
<script>
// 在这里写你的JavaScript代码
</script>
</html>
3.2 JavaScript
在JavaScript代码中，我们可以通过监听文件上传成功事件layui.upload.render().done得到处理后的文件实例对象和上传结果。
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
// 执行实例
console.log(upload.render);
upload.render({
elem: '#updateBtn', // 绑定元素
url: 'http://localhost:9000/test/fileUpload', // 上传接口
accept: 'images',
// 支持上传的文件类型images（图片）、file（所有文件）、video（视频）等
done: function(res) {
var path = res.data.filePath;
$('#fileId').val(res.data.fileId);
$('#previewImg').show();
$("#previewImg").attr({
"src": path,
});
}
});
});
当上传成功后，通过调用$('#previewImg').show()和$('#previewImg').attr()方法来展示预览的图片，这样就实现了上传图片成功后预览图片的功能。
4. 总结
通过Layui组件提供的图片上传功能，我们可以方便地上传图片，并在上传成功后预览图片。这个功能对于在线编辑器、相册等应用都非常有用，并且Layui组件具有轻量级、易用性以及高度可定制的特点，可以很好的满足各种需求。