当前位置: 首页 > article >正文

layui多图上传,tp8后端接收处理

环境:layui2.9.21\thinkphp8.1

前端代码:

layui.use(['upload', 'layer'], function() {
        const upload = layui.upload;
        const layer = layui.layer;
        const $ = layui.$;

        // 上传图片
        const uploadInstImage = upload.render({
            elem: '#uploadImage',
            url: '/admin/demo/uploadImage', // 上传接口
            accept: 'images', // 只允许上传图片
            multiple: true,  // 开启多文件上传;
            unified: true,   // 统一上传,只请求后端api一次;
            field: 'file[]', // 一定要带上[];
            done: function (res) {
                if (res.code === 0) {
                    $('#imagePath').val(res.data.path); // 将路径填入隐藏字段
                    layer.msg('上传成功');
                } else {
                    layer.msg('上传失败:' + res.msg);
                }
            },
            error: function () {
                layer.msg('上传失败,请重试');
            }
        });
    });

后端代码:

use think\facade\Filesystem;
use think\response\Json;
use think\response\View;
use app\admin\validate\Upload; // 创建了图片上传验证器;

public function uploadImage(): Json
    {
        $files = request()->file('file'); // 一定和前端的字段名称保持一致;
        $validate = new Upload();
        $result = $validate->check(['image' => $files]);
        if (!$result) {
            return json(['code' => 500, 'msg' => $validate->getError()]);
        }
        try {
            $filepath = []; // 存储上传成功后的文件路径,以数组的形式保存;
            // 遍历$files
            foreach ($files as $file) {
                $filepath[] = Filesystem::disk('public')->putFile('', $file);
            }
            return json(['code' => 200, 'msg' => 'success', 'data' => ['path' => str_replace('\\', '/', $filepath)]]);
        } catch (\Exception $e){
            return json(['code' => 500, 'msg' => $e->getMessage()]);
        }
    }


http://www.kler.cn/a/455092.html

相关文章:

  • medical meadow medical flashcards
  • windows下Redis的使用
  • 【WRF模拟】如何得到更佳的WRF模拟效果?
  • 使用 HTML5 Canvas 实现动态蜈蚣动画
  • .net framework wpf 打包免安装exe文件
  • KylinOS V10 SP3下编译openGauss与dolphin插件
  • 【蓝桥杯】奇怪的捐赠
  • 【Artificial Intelligence篇】AI 携手人类:共铸未来创作新纪元
  • 去除 el-input 输入框的边框(element-ui@2.15.13)
  • 【模块系列】STM321.69TFT屏幕
  • windows C#-在查询中返回元素属性的子集
  • 原型链(Prototype Chain)入门
  • ITK-基于itkUnaryFunctorImageFilter实现图像反转
  • PDF书籍《手写调用链监控APM系统-Java版》第1章 开篇介绍
  • 前端 学习
  • Alma linux部署gitlab
  • Java 中 List 源码解析:深度剖析与实现
  • 机器学习1-简单神经网络
  • Go主协程如何等其余协程完再操作
  • 废品回收小程序:助力企业转型发展
  • Vue3 +Element-Plus el-select下拉菜单样式(局部生效)
  • vue 中 keep-alive 详解
  • C# 窗体应用程序嵌套web网页,基于谷歌浏览器内核(含源码)
  • 《机器学习》——利用OpenCV库中的KNN算法进行图像识别
  • oracle数据泵expdp/impdp导出导入
  • 【C++第十六课 - C++11】列表初始化、右值引用、移动构造、移动赋值、lambda表达式