thinkphp8结合layui2.9 图片上传验证
<?php
declare (strict_types = 1);namespace app\index\validate;use think\Validate;class Upload extends Validate
{/*** 定义验证规则* 格式：'字段名' => ['规则1','规则2'...]** @var array*/protected $rule = ['image' => 'fileExt:jpg,png|fileSize:204800|fileMime:image/jpeg,image/png', // 文件扩展名限制为jpg, png；文件大小限制为200K；文件MIME类型限制为image/jpeg, image/png];/*** 定义错误信息* 格式：'字段名.规则名' => '错误信息'** @var array*/protected $message = ['image.fileExt' => '图片格式必须为jpg或png','image.fileSize' => '图片大小不能超过200K',];
}
在index应用下，创建了验证器；
<?php
declare (strict_types = 1);namespace app\index\controller;use think\Request;
use app\index\validate\Upload as ValidateUpload;
use think\facade\Filesystem as Fs;
class Upload
{public function index(){return view('/upload');}public function upload(Request $request){$file = $request->file('file');$validate = new ValidateUpload();if (!$validate->check(['image' => $file])) {return json(['code' => 1, 'msg' => $validate->getError()]);}$savename = Fs::disk('public')->putFile('', $file);// 确保路径使用正斜杠$savename = str_replace('\\', '/', $savename);return json(['code' => 0, 'msg' => '上传成功', 'data' => ['url' => '/storage/' . $savename]]);}
}
index应用下，创建了index控制器，upload方法处理了来自前端的ajax上传；
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag"><i class="layui-icon layui-icon-upload"></i> <div>点击上传，或将文件拖拽到此处</div><div class="layui-hide" id="ID-upload-demo-preview"><hr> <img src="" title="上传成功后渲染" style="max-width: 100%"></div>
</div><!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
<script>
layui.use(function(){var upload = layui.upload;var $ = layui.$;// 渲染upload.render({elem: '#ID-upload-demo-drag',url: '/index/upload/upload/', // 实际使用时改成您自己的上传接口即可。accept: 'images', // 指定允许上传的文件类型exts: 'jpg|png', // 允许上传的文件后缀，不带点，多个用|分割，如果需要所有类型则把整个MIME类型写上，如image/*'done: function(res){if(res.code != 0){return layer.msg(res.msg);} else {layer.msg('上传成功');$('#ID-upload-demo-preview').removeClass('layui-hide').find('img').prop('src', res.data.url);console.log(res);}}});
});
</script></body>
</html>这是layui上传图片的前端示例代码；
相关文章：
thinkphp8结合layui2.9 图片上传验证
<?php declare (strict_types 1);namespace app\index\validate;use think\Validate;class Upload extends Validate {/*** 定义验证规则* 格式：字段名 > [规则1,规则2...]** var array*/protected $rule [image > fileExt:jpg,png|fileSize:204800|fi…...
农村污水处理难题：探索低成本高效解决方案
农村污水处理难题：探索低成本高效解决方案 农村污水处理作为国家生态文明建设的重要一环，面临着诸多挑战，尤其是技术落后、管理分散、资源匮乏等问题。物联网技术的引入，为解决这些痛点提供了创新途径，实现了对污水处…...
lightningcss介绍及使用
lightningcss介绍及使用 一款使用 rust 编写的 css 解析器，转换器、及压缩器。 特性 特别快：可以在毫秒级别解析、压缩大量的 css 文件，而且比其他工具的打包结果更小给值添加类型：许多其他css解析器会将值解析成一个无类型的 …...
HTTP服务的应用
1、编辑json请求参数； 2、把json发送到服务url，接收服务的返回参数； 3、解析返回参数。 procedure TfrmCustomQuery.btnFullUpdateClick(Sender: TObject); varfrm: TfrmInputQueryConditionEX;b_OK: Boolean;sBeginDate, sEndDate, sJSON…...
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题
前言： emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。 安卓…...
MySQL4.索引及视图
1.建库 create database mydb15_indexstu; use mydb15_indexstu;2.建表 2.1 student表学（sno）号为主键，姓名（sname）不能重名，性别（ssex）仅能输入男或女，默认所在系别&a…...
MongoDB - 聚合阶段 $match、$sort、$limit
文章目录 1. $match 聚合阶段1. 构造测试数据2. $match 示例3. $match 示例 2. $sort 聚合阶段1. 排序一致性问题2. $sort 示例 3. $limit 聚合阶段 1. $match 聚合阶段 $match 接受一个指定查询条件的文档。 $match 阶段语法： { $match: { <query> } }$ma…...
ModuleNotFoundError: No module named ‘scrapy.utils.reqser‘
在scrapy中使用scrapy-rabbitmq-scheduler会出现报错 ModuleNotFoundError: No module named scrapy.utils.reqser原因是新的版本的scrapy已经摒弃了该方法,但是scrapy-rabbitmq-scheduler 没有及时的更新,所以此时有两种解决方法 方法一.将scrapy回退至旧版本,找到对应的旧版…...
vue3+ts+vite+electron+electron-packager打包成exe文件
目录 1、创建vite项目 2、添加需求文件 3、根据package.json文件安装依赖 4、打包 5、electron命令运行 6、electron-packager打包成exe文件 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron 1、创建vite项目 npm create vitelatest 2、添…...
使用脚本搭建MySQL数据库基础环境
数据库的基本概念 数据（Data） 描述事物的符号记录 包括数字，文字，图形。图像，声音，档案记录等。 以记录形式按统一格式进行存储 表 将不同的记录组织在一起 用来储存具体数据 数据库 表的集合，是…...
Parameter index out of range (2 ＞ number of parameters, which is 1【已解决】
文章目录 1、SysLogMapper.xml添加注释导致的2、解决方法3、总结 1、SysLogMapper.xml添加注释导致的 <!--定义一个查询方法，用于获取日志列表--><!--方法ID为getLogList，返回类型com.main.server.api.model.SysLogModel,参数类型为com.main.se…...
rk3588s 定制版 USB adb , USB2.0与USB3.0 区别，adb 由typeC 转换到USB3.0（第二部分）
硬件资源： rk3588s 核心板定制的地板 软件资源： 网盘上的 android12 源码 1 硬件上 客户只想使用 type c 接口中的 usb2.0 OTG 。在硬件上，甚至连 CC芯片都没有连接。 关于一些前置的知识。 1 USB2.0 与 USB3.0 的区别。 usb3.0 兼容2.0 …...
Cookie与Session 实现登录操作
Cookie Cookie 是网络编程中使用最广泛的一项技术，主要用于辨识用户身份。 客户端（浏览器）与网站服务端通讯的过程如下图所示： 从图中看，服务端既要返回 Cookie 给客户端，也要读取客户端提交的 Cookie。所…...
通过IEC104转MQTT网关轻松接入阿里云平台
随着智能电网和物联网技术的飞速发展，电力系统中的传统IEC 104协议设备正面临向现代化、智能化转型的迫切需求。阿里云作为全球领先的云计算服务提供商，其强大的物联网平台为IEC 104设备的接入与数据处理提供了强大的支持。本文将深入探讨钡铼网关在MQTT…...
lua 游戏架构 之 游戏 AI （五）ai_autofight_find_way
这段Lua脚本定义了一个名为 ai_autofight_find_way 的类，继承自 ai_base 类。 lua 游戏架构 之 游戏 AI （一）ai_base-CSDN博客文章浏览阅读238次。定义了一套接口和属性，可以基于这个基础类派生出具有特定行为的AI组件。例如&…...
vue3+openLayers点击标记事件
<template><!--地图--><div class"distributeMap" id"distributeMap"></div> </template> <script lang"ts" setup> import { onMounted, reactive } from "vue"; import { Feature, Map, View }…...
深入分析 Android ContentProvider (三)
文章目录 深入分析 Android ContentProvider (三)ContentProvider 的高级使用和性能优化1. 高级使用场景1.1. 数据分页加载示例：分页加载 1.2. 使用 Loader 实现异步加载示例：使用 CursorLoader 加载数据 1.3. ContentProvider 与权限管理示例࿱…...
养宠浮毛异味双困扰？性价比高的宠物空气净化器推荐
家里养了两只银渐层，谁懂啊！一下班打开家门就看到家里飘满了猫浮毛雪，空气中还传来隐隐约约的异味。每天不是在吸毛的路上，就是在洗猫砂盆的路上，而且空气中的浮毛还很难清理干净，这是最让人头疼的问题。 …...
maven项目容器化运行之3-优雅的利用Jenkins和maven使用docker插件调用远程docker构建服务并在1Panel中运行
一.背景 在《maven项目容器化运行之1》中，我们开启了1Panel环境中docker构建服务给到了局域网。在《maven项目容器化运行之2》中，我们基本实现了maven工程创建、远程调用docker构建镜像、在1Panel选择镜像运行容器三大步骤。 但是，存在一个问…...
docker 打包orbbec
docker pull humble容器 sudo docker run -it osrf/ros:humble-desktop docker 启动容器 sudo docker run -u root --device/dev/bus/usb:/dev/bus/usb -it -v /home/wl:/share --name wl4 osrf/ros:humble-desktop /bin/bash新开一个终端 查看本地存在的容器：…...
Vue 3 + hls.js 实战：手把手教你打造一个能‘续命’的安防监控播放器
Vue 3 hls.js 打造安防级视频流播放器的"续命"秘籍 在安防监控、智慧城市等实时视频流应用场景中，网络抖动、服务中断、页面切换等问题常常导致视频播放中断，严重影响监控效果。本文将深入探讨如何基于Vue 3和hls.js构建一个具备"续命&q…...
游戏资源解密工具：RPG Maker Decrypter零基础使用指南
游戏资源解密工具：RPG Maker Decrypter零基础使用指南 【免费下载链接】RPGMakerDecrypter Tool for extracting RPG Maker XP, VX and VX Ace encrypted archives. 项目地址: https://gitcode.com/gh_mirrors/rp/RPGMakerDecrypter RPG Maker Decrypter 是一…...
智鼎在线测评通关秘籍：2024最新51job题库实战解析与避坑指南
智鼎在线测评通关秘籍：2024最新51job题库实战解析与避坑指南 在竞争激烈的求职市场中，智鼎在线测评已成为众多知名企业筛选人才的第一道门槛。据统计，2024年使用智鼎测评系统的企业数量同比增长35%，而通过率却不足40%。这份指南将…...
解决Windows端口转发难题：PortProxyGUI的可视化管理方案
解决Windows端口转发难题：PortProxyGUI的可视化管理方案 【免费下载链接】PortProxyGUI A manager of netsh interface portproxy which is to evaluate TCP/IP port redirect on windows. 项目地址: https://gitcode.com/gh_mirrors/po/PortProxyGUI 在网络…...
探索视频采集技术：OBS Studio实现高效直播录制的创新方法
探索视频采集技术：OBS Studio实现高效直播录制的创新方法 【免费下载链接】obs-studio OBS Studio - 用于直播和屏幕录制的免费开源软件。 项目地址: https://gitcode.com/GitHub_Trending/ob/obs-studio 在当今内容创作领域，视频采集技术是直播与…...
医疗影像分析中的图像分割避坑指南：从Sobel到Canny的算法选型
医疗影像分析中的图像分割避坑指南：从Sobel到Canny的算法选型 在CT和MRI扫描成为临床诊断常规手段的今天，医疗影像分析正面临前所未有的数据洪流。某三甲医院的放射科主任曾向我展示过一组数据：单台256排CT日均产生超过200GB的DICOM影像&…...
5种场景轻松搞定抖音视频保存 开源工具让无水印下载变简单
5种场景轻松搞定抖音视频保存 开源工具让无水印下载变简单 【免费下载链接】douyin_downloader 抖音短视频无水印下载 win编译版本下载：https://www.lanzous.com/i9za5od 项目地址: https://gitcode.com/gh_mirrors/dou/douyin_downloader 在数字内容爆炸的时…...
归并排序：稳定排序的典范
归并排序：稳定排序的典范 算法原理 核心思路 归并排序是一种基于分治思想的稳定排序算法，其核心思想是： 分解：将数组分成两个子数组，递归地对两个子数组进行排序合并：将两个已排序的子数组合并成一个有序数…...
010Editor逆向实战：从爆破到算法还原的完整通关指南（附注册机源码）
010Editor逆向工程深度解析：从关键跳转定位到注册机实现 1. 逆向工程基础与工具链搭建 逆向工程作为软件安全领域的核心技术，要求分析者具备扎实的汇编语言基础和系统级编程经验。在进行010Editor逆向分析前，需要构建完整的工具链环境&#x…...
在AutoDL云平台用RTX 4090快速训练你的LeRobot机械臂模型：完整配置与成本分析
在AutoDL云平台用RTX 4090快速训练你的LeRobot机械臂模型：完整配置与成本分析 当个人开发者或小型团队面临本地算力不足的困境时，云端GPU资源成为快速验证机器人学习算法的理想选择。AutoDL等云平台提供的RTX 4090实例，以其24GB显存和卓越的并…...