使用Layui上传图片，并进行压缩

最新推荐文章于 2025-06-24 13:40:31 发布

「已注销」

最新推荐文章于 2025-06-24 13:40:31 发布

阅读量4.8k

点赞数 4

CC 4.0 BY-SA版权

文章标签：图片上传 Layui

本文链接：https://blog.youkuaiyun.com/Jasons_xie/article/details/89204379

本文介绍了如何结合Layui实现图片上传功能，并详细讲述了如何在上传过程中进行图片压缩，以满足项目需求。通过引用Layui的上传模块，并自定义处理逻辑，实现了既能上传又能压缩图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传.

Layui 上传图片官方文档：https://www.layui.com/doc/modules/upload.html

HTML：

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>

tips:不一定非要是input标签，无论是什么标签，layui upload是根据其 id 值进行操作的

JS：

<script>
//使用layui上传图片
  layui.use('upload', function () {
    var upload = layui.upload;
    var layer = layui.layer;

    //执行实例
    var uploadInst = upload.render({
      elem: '#isTest', //绑定元素
      url: '/upload/', //上传接口
      accept: 'images',
      auto: false,

      choose: function (obj) { //选择文件后的回调
        var files = obj.pushFile();
        var filesArry = [];
        fo