layui上传图片详解「代码演示」

1.前言

在开发web应用程序时，文件上传功能是必不可少的，而在文件上传中又以图片上传功能最为常见。今天介绍的是layui的上传图片功能的详解。layui是一款简约的前端UI框架，使用方便，同时也提供了上传图片的功能，并且支持拖拽上传、限制大小、限制类型等功能，非常实用。

2.准备工作

首先要在你的页面中引入layui的相关文件，如果您未安装，可以通过nmp命令安装：

npm install layui --save

然后通过link引入layui的css文件，通过script标签引入layui.js文件：

<link href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css" rel="stylesheet" integrity="sha384-HESQW1DiKnhhrEYyZxYrvTJdwKcbWUOg/Y1lMIXwZJrT7BnVN88QcloRzn4Y/PgU" crossorigin="anonymous">
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js" integrity="sha384-lUeVU0VWoMdaZLHboz+IzPhWCXFcVlKM0evB8F0TCc5yUgnXMvHXaa+5K/artfLO" crossorigin="anonymous">
</script>

接着在body标签中创建一个div容器用来存放上传图片：

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <span class="demo-delete">删除</span>
</div>
</div>

其中，test1为上传文件的按钮，demo1为展示图片的img标签，demo-delete是删除图片时用到的标签。

3.上传配置及实现

3.1 配置项详解

layui的上传图片功能支持多种配置项，以下为常用的配置项说明：

url：上传图片的url，必填项

accept：允许上传的图片类型，只能是图片，如"images"

exts：允许上传的图片类型，如".jpg|.jpeg|.png"

elem：绑定上传区域的选择器，如"#test1"

before：上传前的回调函数，可用于检查文件大小、类型等，如

before: function (obj) {
    layer.load();
},

more相关配置项请参考layui官方文档

3.2 实现上传图片

实现上传的核心代码如下：

layui.use('upload', function () {
    var upload = layui.upload;
    //绑定上传组件
    var uploadInst = upload.render({
        elem: '#test1', //绑定上传区域的选择器
        url: '/upload/', //上传图片的url
        accept: 'images', //允许上传的图片类型，只能是图片
        exts: 'jpg|jpeg|png', //允许上传的图片类型
        multiple: false, //是否允许多图上传
        auto: false, //是否自动上传
        bindAction: '#testListAction', //上传的按钮
        before: function (obj) {
            //上传前的回调，可用于检查文件大小、类型等
            console.log('file_name', obj.name);
            layer.load();
        },
        done: function (res) {
            //上传完毕的回调，可用于错误处理，如上传失败时的提示
            console.log(res);
        },
        error: function (index, upload) {
            //上传错误的回调，如文件大小超出限制时的提示
            layer.closeAll('loading');
            layer.msg("上传失败，请检查文件大小是否超过限制！");
        }
    });
});

绑定上传区域的选择器和上传按钮，设置上传文件的参数，之后通过内置的上传函数进行上传操作。

4.实例演示

下面是一个完整的分步上传操作的实例代码。

html代码：

<div class="layui-card-header">上传图片示例</div>
<div class="layui-card-body">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="upload">上传一个文件</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
</div>

JS代码：

layui.use(['upload', 'element'], function() {
    var $ = layui.jquery
    var upload = layui.upload
    var element = layui.element
    //定义图片上传地址
    var imgUrl = '/api/uploadImg'
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#upload',
        url: imgUrl,
        accept: 'images',
        exts: 'jpg|jpeg|png',
        auto: false,
        bindAction: '#imageAction',
        before: function(obj) {
            obj.preview(function(index, file, result) {
                $('#demo1').attr('src', result)
            })
        },
        done: function(res) {
            console.log(res)
            $('#demoText').html('上传成功')
        },
        error: function(index, upload) {
            layer.msg('上传错误,请重新上传')
        }
    })
})

最后预览一下，附上实例演示链接。

5.总结

本文主要介绍了layui上传图片的相关知识，包括配置项详解、上传图片的实现、实例演示等内容。上传图片是web应用中的一个非常常见的功能，而layui的上传图片功能使用方便，功能强大，支持拖拽上传、限制大小、限制类型等功能，对于开发web应用程序非常实用。