怎么用layui实现图片上传-猿码集

1. 简介

Layui是一款国产的前端组件化与模块化开发框架，它强调简洁、易用和内置大量组件，比如表单、表格、弹窗、树形结构、日期和分页等等。在实际应用中，我们常常需要上传图片，本文将介绍如何使用 layui 实现图片上传的功能。

2. 下载 Layui

首先，我们需要下载 Layui 的代码库，可以从官网 https://www.layui.com/ 获取最新版本的下载链接，并将其解压到项目目录中。

// 下载 layui 源码 wget https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui-src.zip // 解压到项目目录中 unzip layui-src.zip -d ./public/layui/

3. 引入 layui 模块

在 HTML 页面中引入 layui 的相关模块，这里我们需要使用 layui 的 upload 和 layer 模块，upload 模块用于实现图片上传的具体功能，layer 模块则用于实现弹窗效果。

// 引入 layui 的 css 文件
<link rel="stylesheet" href="./public/layui/css/layui.css">
// 引入 layui 的 js 文件
<script type="text/javascript" src="./public/layui/layui.js"></script>
// 引入 jquery 库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
// 使用 upload 和 layer 模块
<script>
    layui.use(['upload', 'layer'], function() {
        var upload = layui.upload,
            layer = layui.layer;
            
        // 具体代码实现
    });
</script>

4. 图片上传功能实现

4.1 HTML 代码结构

首先，我们需要在 HTML 页面中定义一个用于上传图片的区域，并预留一个用于展示已上传图片的区域。

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="showImg">
    <p id="imgUrl">
  </div>
</div>

其中，id 为 uploadBtn 的按钮用于触发图片上传功能，id 为 showImg 的 img 标签则用于展示已上传的图片，id 为 imgUrl 的 p 标签则用于展示上传图片的 URL 地址。

4.2 图片上传事件绑定

接着，我们需要在代码中绑定图片上传事件。使用 layui.upload 模块中的 render 函数，我们可以实现图片上传按钮的事件绑定、文件选择、上传进度等等功能。

// 实现图片上传
upload.render({
    elem: '#uploadBtn',
    url: 'http://localhost:3000/upload',
    accept: 'images',
    done: function(res) {
        console.log(res);
        // 上传成功后，将图片展示出来，展示图片的 img 标签 id 为 showImg
        $("#showImg").attr("src", res.data);
        $("#imgUrl").html(res.data);
    },
    error: function(res) {
        console.log(res);
        layer.msg("上传失败");
    }
});

其中，我们需要指定 elem 为绑定上传事件的按钮的 ID，url 为图片上传地址，done 为上传成功的回调函数，error 为上传失败的回调函数。

5. 后端代码

因为不同的开发语言上传图片的方式不同，本文中只提供 Node.js 的后台代码示例。

5.1 安装相关依赖

我们使用 Express 框架来实现 Node.js 后端开发。打开项目终端，可以使用以下命令安装 Express 相关依赖：

npm init -y npm install express --save npm install multer --save

其中，multer 是一个基于 Express 的文件上传中间件，我们通过安装它来方便地处理 HTTP 请求中的文件上传部分。

5.2 编写后端上传图片接口

在 Express 中，我们通过定义路由实现不同的请求对应不同的处理逻辑。在本文中，我们定义一个 POST 请求的路由 '/upload'，并处理图片上传的请求，具体实现如下：

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
// 通过 Multer 中间件实现图片上传
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './public/uploads');
    },
    filename: function(req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname)
    }
});
const upload = multer({ storage: storage });
// 定义 POST 路由 '/upload'，使用上传中间件 upload.single('file')
app.post('/upload', upload.single('file'), function(req, res) {
    console.log(req.file);
    const imgUrl = 'http://localhost:3000/uploads/' + req.file.filename; // 返回图片 URL 地址到客户端
    res.json({ code: 0, msg: '上传成功', data: imgUrl });
});
app.listen(3000, function() {
    console.log('Server running at http://localhost:3000');
});

在这段代码中，我们通过 Multer 中间件实现图片上传的功能。具体来说，我们通过定义一个磁盘存储引擎（diskStorage），在定义的目录下保存上传文件，然后将上传文件的 URL 地址返回到客户端。

6. 效果展示

完成上述前后端代码编写后，启动前端项目和 Node.js 后端项目，并在浏览器中访问前端页面，即可进行图片上传功能的测试。效果如下图所示：

7. 总结

本文介绍了在使用 Layui 框架中，如何实现图片上传的功能，并提供了相应的代码示例，读者可以根据实际需要在自己的项目中进行使用。

怎么用layui实现图片上传