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

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 = []; // 存储上传成功后的文件路径,以数组的形式保存;// 遍历$filesforeach ($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.lryc.cn/news/513762.html

相关文章:

  • QEMU网络配置简介
  • 28.Marshal.PtrToStringAnsi C#例子
  • 基于feapder爬虫与flask前后端框架的天气数据可视化大屏
  • Linux隐藏登录和清除历史命令以及其他相关安全操作示例
  • 从授权校验看SpringBoot自动装配
  • tensorboard的界面参数与图像数据分析讲解
  • MTK 平台关于WIFI 6E P2P的解说
  • 离线语音识别+青云客语音机器人(幼儿园级别教程)
  • leetcode hot 100 跳跃游戏
  • 陪诊陪护助浴系统源码:JAVA养老护理助浴陪诊小程序医院陪护陪诊小程序APP源码
  • 怎么在家访问公司服务器?
  • asp.net core框架搭建4-部署IIS/Nginx/Docker
  • ubuntu中zlib安装的步骤是什么
  • 代码随想录算法训练营第二十天-二叉树-669. 修剪二叉搜索树
  • 发现API安全风险,F5随时随地保障应用和API安全
  • 【AI学习】2024年末一些AI总结的摘录
  • ws长时间不发消息会断连吗?
  • 使用 ASP.NET Core wwwroot 上传和存储文件
  • 【每日学点鸿蒙知识】人脸活体检测、NodeController刷新、自动关闭输入框、Row设置中间最大宽、WebView单例
  • Android TV端弹出的PopupWindow没有获取焦点
  • 从0开始的docker镜像制作-ubuntu22.04
  • 1Panel自建RustDesk服务器方案实现Windows远程macOS
  • STM32完全学习——使用定时器1精确延时
  • 深度学习——损失函数汇总
  • 1、单片机寄存器-io输入实验笔记
  • 记忆旅游系统|Java|SSM|VUE| 前后端分离
  • CentOS7下的 OpenSSH 服务器和客户端
  • RabbitMQ基础篇之Java客户端 Topic交换机
  • 微服务-Sentinel新手入门指南
  • 传统听写与大模型听写比对