tp6+layUI多图片上传(带排序、删除)功能_layui thinkphp6 多图上传-CSDN博客

本文链接：https://blog.csdn.net/quweiie/article/details/128445242

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layUI多图上传演示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{__LAYUIMINI__}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="{__LAYUIMINI__}/css/public.css" media="all">
  <style>
      .box {width: 60%;margin: 60px auto;}
      #blockquote_box{width: 100%;height: auto;min-height: 156px;margin:0;padding: 2px;box-sizing: border-box;}
      .blockquote_item{width: 100%;height: 100%;margin: 0;border: 1px solid #d8d8d8;overflow: hidden;min-height: 156px;}
      .img_box{width: 150px;height: 156px;margin-left:7px;float: left;position: relative;}
      #removeImg{display: block;width: 80px;height: 30px;background-color: red;position: absolute;left: 34px;bottom: 6px;margin: 0;padding: 0;}
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
      <div class="box">
          <form class="layui-form" action="">
              <div class="layui-form-item">
                  <label class="layui-form-label">多图列表：</label>
                  <div class="layui-upload layui-input-block">
                      <button type="button" class="layui-btn" id="btn_multiple_upload_img">多图上传</button>
                      <blockquote class="layui-elem-quote layui-quote-nm" id="blockquote_box" style="margin-top: 10px;">
                          <div class="layui-upload-list blockquote_item" id="upload_image_list"></div>
                          <input type="hidden" name="images_str" class="upload_image_url" value="">
                      </blockquote>
                  </div>
              </div>
              <div class="layui-form-item">
                  <div class="layui-input-block">
                      <button class="layui-btn" type="button" lay-submit lay-filter="formDemo" id="commit">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
              </div>
          </form>
      </div>
      <script type="text/javascript" src="{__LAYUIMINI__}/lib/sortable/sortable.min.js"></script>
  </div>
</div>
<script src="{__LAYUIMINI__}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['upload','form','jquery'],function () {
        let upload =layui.upload, form =layui.form, $=layui.jquery;
        upload.render({
            elem:"#btn_multiple_upload_img",
            url:"http://localhost/admin/upload/upload/",
            multiple:true,
            auto:false,
            bindAction:"#commit",
            choose:function (obj) {
                let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                obj.preview(function(index, file, result){
                    $('#upload_image_list').append('<div class="img_box" pid="'+index+'" ><img  style="height: 100%;width:100%;" src="'+ result +'"  class="layui-upload-img"><a id="removeImg"  class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</a></div>');
                    $("body").on("click","#removeImg",function(){
                        $(this).parent().remove();
                        delete files[$(this).parent().attr("pid")];
                    });
                });
            },
            done:function (res) {
                if(res.code ==1){
                    let last_url = $(".upload_image_url").val();
                    let upload_image_url = "";
                    if(last_url){
                        upload_image_url = last_url + "," + res.path[0];
                    }else {
                        upload_image_url = res.path[0]; //tp6返回的path是数组
                    }
                    $(".upload_image_url").val(upload_image_url);
                    console.log($(".upload_image_url").val());
                }

            }
        });
        // 表单提交事件
        form.on('submit(formDemo)', function (data) {

        });
    });

    // 图片拖拽排序
    let photosView = document.getElementById('upload_image_list');
    new Sortable(photosView, {
        animation: 200,
    });
</script>
</body>
</html>

sortable.js去github.com 下载
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
/*! Sortable 1.8.3 - MIT | git://github.com/SortableJS/Sortable.git */

服务端代码：

namespace app\admin\controller;

use think\facade\View;

class Upload
{
    public function index(){
        return View::fetch('/page/upload/index');
    }

    public function upload()
    {
        $files = request()->file(); //切记file里不要带参数(如：file,image)
        try {
            validate(['image'=>'fileSize:10240|fileExt:jpg|image:200,200,jpg'])
                ->check($files);
            $info = [];
            foreach($files as $file) {
                $info[] = \think\facade\Filesystem::disk('public')->putFile('',$file); 
            }
            $filepath=str_replace('\\','/', $info);
            return json(array('code' => 1, 'msg' => '上传成功', 'path' => $filepath));
        } catch (\think\exception\ValidateException $e) {
            echo $e->getMessage();
        }
    }
}

config文件夹里filesystem.php 改下配置文件内容

return [
    // 默认磁盘
    'default' => env('filesystem.driver', 'local'),
    // 磁盘列表
    'disks'   => [
        'local'  => [
            'type' => 'local',
            'root' => app()->getRuntimePath() . 'upload', //把之前的storage 改成upload
        ],
        'public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/upload', //把之前的storage 改成upload
            // 磁盘路径对应的外部URL路径
            'url'        => '/upload', //把之前的storage 改成upload
            // 可见性
            'visibility' => 'public',
        ],
        // 更多的磁盘配置信息
    ],
];