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

node.js 实战——在express 中将input file 美化，并完成裁剪、上传进度条

news 来源：原创 2025/8/13 8:13:31

美化上传按钮

在这里插入图片描述

在ejs 页面

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></meta><title><%= title %></title><link rel='stylesheet' href='/stylesheets/form.css'/><!-- 本地 Bootstrap 引入方式 --><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/bootstrap/js/bootstrap.bundle.min.js"></script><script src="./javascripts/image-upload.js"></script>
</head>
<body>
<div class="container"><h1>文件上传</h1><from action="/upload-img" method="post" enctype="multipart/form-data"><label class="upload-container"><span class="upload-icon" id="uploadIcon">+</span><input accept="image/*" id="avatarInput" type="file" /><img id="avatarPreview" class="preview-img d-done" /><button type="button" class="remove-btn" id="removeBtn">x</button></label><button type="submit" class="btn btn-primary mt-3">提交</button></from>
</div>
</body>
</html>

样式

.upload-container{width: 150px;height: 150px;border: 2px solid #ccc;border-radius: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;overflow: hidden;background-color: #f8f9fa;transition:border-color 0.3s;.upload-icon{font-size:2rem;color:#999;//禁用鼠标事件，该元素变得“不可点击”、“鼠标穿透”pointer-events: none;  //用来控制一个元素是否能响应鼠标事件（点击、悬停、拖动等）}.preview-img{width:100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}.remove-btn{position: absolute;top:5px;right:5px;background-color:rgba(0,0,0,.6);color:#ffffff;border:none;border-radius:50%;width:24px;height:24px;display:none;align-items: center;justify-content: center;cursor:pointer;font-weight: bold;}
}.upload-container:hover{border-color: #007bff;
}.upload-container input[type="file"]{position: absolute;opacity: 0;height: 100%;width: 100%;cursor: pointer;
}

完成效果

这个效果没有裁剪，进度条、多图片上传
在这里插入图片描述

上传进度条

   <div class="progress mt-2 d-done" id="progressWrapper"><div class="progress-bar" role="progressbar" id="uploadProgress" style="width: 0%">0%</div></div>

 document.getElementById('uploadForm').addEventListener('submit', function(e){e.preventDefault();// const blob =preview._blob;// if(!blob){//     alert("请先选择并裁剪头像");//     return;// }const file =input.files[0];if(!file) return alert('Please upload a valid image!');let formData = new FormData();formData.append('file', file);let xhr = new XMLHttpRequest();xhr.open('POST', '/upload-avatar');xhr.upload.addEventListener('progress', (e) => {if(e.lengthComputable){let percent = Math.round((e.loaded / e.total) * 100);progressWrapper.classList.remove('d-none');progressBar.style.width= percent + '%';progressBar.innerText = percent + '%';}})xhr.onload =function () {if(xhr.status === 200) {alert("successfully uploaded!");}else{alert("fail to upload");}}xhr.send(formData);})

使用cropperjs 裁剪图片

使用npm安装

npm install cropperjs@1.5.13

❗ 关键点：cropperjs@2.x 为模块化版本，不再提供 dist/ 下的浏览器用 JS/CSS 文件

从 v2.0.0 开始，cropperjs 改为纯 ESM（ES Module）包，它不再包含：

cropper.js
cropper.css
dist/ 文件夹

📌 小提示

版本	适合人群	是否自带 dist/
1.5.13	普通浏览器/EJS 项目	✅ 有 JS/CSS，推荐
2.x	Vite/Webpack 打包项目	❌ 无，需构建

引入js、css

   <!--本地开发引入 cropper --><link rel="stylesheet" href="/cropper/cropper.css"><script src="/cropper/cropper.js"></script>

弹框

<!-- 裁剪模态框--><div class="modal fade modal-mask" id="cropModal" tabindex="1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-fullscreen"><div class="modal-content p-3"><div class="modal-body" style="width: 100%; height: 600px;"><img id="cropImg"  /></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-success" id="cropConfirm">确认裁剪</button></div></div></div></div>

js

input.addEventListener('change', (e)=> {let that=e.target;let file=that.files[0];if(file && file.type.startsWith('image/')) {let reader=new FileReader();reader.onloadend = (e) => {//未裁剪前使用的代码// preview.src = e.target.result;// preview.classList.remove('d-none');// removeBtn.style.display = 'flex';// uploadIcon.style.display = 'none';//裁剪时的代码cropImage.src = e.target.result;new bootstrap.Modal(document.getElementById('cropModal')).show();cropImage.onload =()=>{if(cropper) cropper.destroy();cropper =new Cropper(cropImage,{aspectRatio: 1,autoCropArea:1,viewMode:2})}}reader.readAsDataURL(file);}})

在这里插入图片描述

node.js 实战——在express 中将input file 美化，并完成裁剪、上传进度条

美化上传按钮在ejs 页面 <!DOCTYPE html> <html> <head><meta charset"utf-8"></meta><title><% title %></title><link relstylesheet href/stylesheets/form.css/>…...

编程日记 2025/8/13 8:13:31

Linux环境下部署MaxScale

测试环境：两台服务器，Mysql版本 8.0，linux版本：Ubuntu 20.04.3； 介绍在我之前的文章里面有介绍MySql主从服务器的配置，我们项目通常使用.NET开发Server端，如果是代码直接去管理主从服务器的访…...

编程日记 2025/8/8 12:19:21

新能源汽车CAN通信深度解析：MCU、VCU、ECU协同工作原理

1. 什么是CAN通信？ CAN（Controller Area Network，控制器局域网） 是一种广泛应用于汽车电子系统的串行通信协议，由德国Bosch公司在1980年代开发，主要用于实现车内电子控制单元（ECU）之…...

编程日记 2025/8/13 8:08:17

按句子切分文本、保留 token 对齐信息、适配 tokenizer（如 BERT）这种需求

在之前的文章中我解释了把长文本切分成一句一句的小段（chunk），每一段尽量是一个完整的句子，而不是强行按字数截断。但是这个方法自己写会比较复杂，有很多处理这种场景的工具可以直接拿来用。下面就处理按句子切分…...

编程日记 2025/8/13 8:11:36

缓存（1）：三级缓存

三级缓存是指什么我们常说的三级缓存如下： CPU三级缓存Spring三级缓存应用架构（JVM、分布式缓存、db）三级缓存 CPU 基本概念 CPU 的访问速度每 18 个月就会翻倍，相当于每年增⻓ 60% 左右，内存的速度当然也会不断…...

编程日记 2025/8/13 8:07:07

Kubernetes client-go 客户端类型与初始化指南

Kubernetes client-go 客户端类型与初始化指南在 Kubernetes 的 client-go 库中，存在多种客户端用于与 API 服务器交互。以下介绍主要客户端类型，包括用途、初始化方式及 Demo。 1. RESTClient 用途 RESTClient 是底层 REST 客户端，直接…...

编程日记 2025/8/13 8:11:37

【金仓数据库征文】金仓数据库：创新驱动，引领数据库行业新未来

一、引言在数字化转型的时代洪流中，数据已跃升为企业的核心资产，宛如企业运营与发展的 “数字命脉”。从企业日常运营的精细化管理，到战略决策的高瞻远瞩制定；从客户关系管理的深度耕耘，到供应链优化的全面协同&…...

编程日记 2025/8/8 12:19:11

文章目录 1.SDK支持的平台类型1.1 Windows 平台1.2 Linux平台 2.Sample_V2编译流程2.1 Windows环境2.2 Linux环境编译 3.Sample_V2示例程序测试3.1 ListDevice_v23.2 DepthStream_v23.3 ExposureTimeSetting_v23.4 ForceDeviceIP_v23.5 GetCalibData_v23.6 NetStatistic_v23.7 …...

编程日记 2025/8/8 12:19:09

手写 vue 源码 ===：自定义调度器、递归调用规避与深度代理

目录引言自定义调度器（Scheduler） 什么是调度器？ 调度器的实现原理自定义调度器的实际应用切面编程（AOP）思想在调度器中的应用递归调用规避递归调用的问题 Vue 如何规避递归调用深度代理（D…...

编程日记 2025/8/13 8:11:20

WPF实时调试的一种实现方法

在WPF程序中，如果我们需要对程序进行调试，一般是使用断点/单步或输出日志之类的调试方法。如果我们需要实时查看程序输出，可以将程序的输出类型修改为控制台应用程序这样我们在程序运行后，就可以得到一个控制台窗口。然后再配…...

编程日记 2025/8/13 8:10:14

数据库操作

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人能接…...

编程日记 2025/8/13 8:11:20

学习笔记：数据库——事务

1.内容： 基于现有数据库设计检查点实验，观察比较提交前后执行结果并分析。 2.实现源码 -- 开启事务 START TRANSACTION;-- 插入一条订单记录（客户ID为10002） INSERT INTO orders (o_date, c_id) VALUES (NOW(), 10002);-- 获…...

编程日记 2025/8/8 12:19:02

企业级可观测性实现：OpenObserve云原生平台的本地化部署与远程访问解析

文章目录前言1. 安装Docker2. 创建并启动OpenObserve容器3. 本地访问测试4. 公网访问本地部署的OpenObserve4.1 内网穿透工具安装4.2 创建公网地址 5. 配置固定公网地址前言嘿，各位小伙伴们，今天要给大家揭秘一个在云原生领域里横扫千军的秘密法宝—…...

编程日记 2025/8/8 12:19:00

【Linux系统】第三节—权限

Hello，好久不见—— 云边有个稻草人-CSDN个人博客主页 Linux-本节文章所属专栏-欢迎订阅-持续更新中~~~ 目录 hi！在这里—本节课重要知识点详解一、Shell命令以及运行原理二、Linux权限 2.1 Linux权限的概念 2.2 Linux权限管理 2.3 ⽂件权限值的…...

编程日记 2025/8/8 12:18:58

@Data和 @NoArgsConstructor注解详解

Data 和 NoArgsConstructor 注解详解 1. Data 注解作用：Data 是 Lombok 提供的一个复合注解，用于自动生成 Java 类的常用方法，减少样板代码。生成的内容： Getter 和 Setter：为所有非静态、非 final 字段生成 getter…...

编程日记 2025/8/13 8:11:19

《云计算》第三版总结

《云计算》第三版总结云计算体系结构云计算成本优势开源云计算架构Hadoop2.0 Hadoop体系架构 Hadoop访问接口Hadoop编程接口 Hadoop大家族分布式组件概述ZooKeeperHbasePigHiveOozieFlumeMahout 虚拟化技术服务器虚拟化存储虚拟化网络虚拟化桌面虚拟化OpenStack开源虚…...

编程日记 2025/8/8 12:18:56

滚珠导轨：电子制造领域精密运动的核心支撑

电子制造正朝着高精度、高效率方向飞速发展，滚珠导轨在这一进程中扮演着重要角色。滚珠导轨在电子制造领域中具有广泛且重要的应用，主要体现在以下几个方面： 1、印刷电路板（PCB）制造设备：滚珠导轨在PCB制造…...

编程日记 2025/8/8 12:18:54

Spark缓存--cache方法

在Spark 中，cache() 是用于优化计算性能的核心方法之一，但它有许多细节需要深入理解。以下是关于 cache() 的详细技术解析： 1. cache() 的本质简化的 persist()：cache() 是 persist(StorageLevel.MEMORY_ONLY) 的快捷方式&#x…...

编程日记 2025/8/13 8:04:16

kafka logs storage

Kafka 会将日志文件按段（Segment）存储。 Segment是Kafka的最小存储单元，它是一个可追加的文件，用于存储Kafka分区中的一部分消息。在文件系统中，Partition 是目录名，而Segment 是文件名。 Segment可以通过…...

编程日记 2025/8/8 12:18:51

数据分析平台选型与最佳实践：如何打造高效、灵活的数据生态？

数据分析平台选型与最佳实践：如何打造高效、灵活的数据生态？在大数据时代，数据分析平台已经成为企业决策的核心支撑。从传统 BI（商业智能）到现代 AI 驱动的数据分析，选择合适的平台不仅影响数据处理效率，也决定了企业的数字化竞争力。面对市场上的众多解决方案（如 Ap…...

编程日记 2025/8/13 8:10:15

MYSQL之索引结构，为何要用B+树

索引的目的就是为了提高查询效率索引的结构是B树，那么说到B树，必须提一下其他三种结构，分别是：二叉查找树、平衡二叉树、B树我们来看看各自的结构特征二叉查找树特点:任何节点的左子节点的值都小于当前节点的值，右…...

编程日记 2025/8/13 8:04:16

OpenCV 中用于背景分割的一个类cv::bgsegm::BackgroundSubtractorLSBP

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::bgsegm::BackgroundSubtractorLSBP 是 OpenCV 中用于背景分割的一个类，它基于局部样本二进制模式（Local Sample Bina…...

编程日记 2025/8/13 8:05:16

【PmHub后端篇】PmHub Gateway全局过滤器：接口调用耗时统计及黑白名单配置技术深度解析

在微服务架构日益成为现代应用开发主流模式的背景下，网关作为微服务架构前端的关键组件，肩负着路由请求、负载均衡、安全认证、流量控制、监控和日志记录等多项重要任务。本文将围绕PmHub项目中Gateway全局过滤器实现接口调用耗时统计的相关技术进行深入…...

编程日记 2025/8/13 8:10:15

国产激光二极管厂家

中国在激光二极管（Laser Diode）领域已有多家厂商布局，涵盖从低功率到高功率、不同波长的产品，应用于工业、医疗、通信、消费电子等领域。以下是部分国产激光二极管厂家及相关信息，供参考： 1. 武汉锐科光纤…...

编程日记 2025/8/8 12:18:42

安卓基础（XML）

123 属性行为适用场景注意事项match_parent填满父容器可用空间全屏视图、占满剩余空间父容器需有固定尺寸wrap_content根据内容自适应尺寸动态文本、图标、浮动按钮内容过长时可能超出父容器需处理 123 属性作用常用值…...

编程日记 2025/8/13 8:05:16

uniapp｜获取当前用户定位、与系统设定位置计算相隔米数、实现打卡签到(可自定义设定位置、位置有效范围米数)

基于UniApp阐述移动应用开发中定位功能的实现全流程，涵盖实时定位获取、动态距离计算与自定义位置、有效范围设定等功能。文章提供完整的代码示例与适配方案，适用于社交签到、课堂教室打卡等场景。目录引言定位功能在移动应用中的价值（社交、导航、O2O等场景）UniApp跨平台…...

编程日记 2025/8/13 8:08:17

matlab稳定求解高精度二维对流扩散方程

利用MATLAB稳定求解高精度二维对流扩散方程 Diffusion_1D.m , 2310 Diffusion_2D.m , 3813 license.txt , 1334...

编程日记 2025/8/8 14:32:40

【最新版】likeshop连锁点餐系统-PHP版+uniapp前端全开源

一.系统介绍 likeshop外卖点餐系统适用于茶饮类的外卖点餐场景，搭建自己的一点点、奈雪、喜茶点餐系统。系统基于总部多门店的连锁模式，拥有门店独立管理后台，支持总部定价和门店定价LBS定位点餐，可堂食可外卖。无论运营还是二开…...

编程日记 2025/8/13 8:08:45

Redis 重回开源怀抱：开源精神的回归与未来展望

在开源软件的广袤天地里，Redis 一直是备受瞩目的明星项目。近期，Redis 宣布重新回归开源，这一消息犹如一颗石子投入平静的湖面，在技术社区激起层层涟漪。今天，就让我们深入了解 Redis 这一重大转变背后的故事、意义以及…...

编程日记 2025/8/13 8:05:15

mac运行java文件提示错误: 缺少 JavaFX 运行时组件, 需要使用该组件来运行此应用程序

1、问题如上双击java文件打不开，命令行报错。查找了下文章说java8之后，高版本jdk不自带javafx，需要自己下载 2、解决办法首先查看自己的java版本，我是17.0.10 访问 JavaFX - Gluon 下载对应的版本，如果没有对应的 …...

编程日记 2025/8/13 8:04:17

pimpl与unique_ptr的问题

PImpl与std::unique_ptr组合 pimpl(Pointer to Implementation)是C程序开发中非常常用的技巧之一，它的好处有： 节省程序编译时间保持程序/库的二进制兼容性隐藏实现细节举例一个常见的pimpl的使用示例： // a.h class Impl; //前置声明 c…...

编程日记 2025/8/13 8:05:15

Opencv进阶操作：图像拼接

文章目录前言一、图像拼接的原理1. 特征提取与匹配2. 图像配准3. 图像变换与投影4. 图像融合5. 优化与后处理二、图像拼接的简单实现（案例实现）1.引入库2.定义cv_show()函数3.创建特征检测函数detectAndDescribe()4.读取拼接图片5.计算图片特征点及描述…...

编程日记 2025/8/13 8:07:08

记录Token反序列化OAuth2Authentication（主要是直接存储用户信息的UserDetails ）

项目场景： 本地开发环境部署了多套系统，并且使用了同一套登入鉴权组件，存入的TokenStore也是相同的Redis库； 问题描述&原因分析由于是做的不同项目，group等组织机构不同，导致多系统若是有存储相同用…...

编程日记 2025/8/13 8:08:18

【QT】深入理解 Qt 中的对象树：机制、用途与最佳实践

深入理解 Qt 中的对象树：机制、用途与最佳实践在使用 Qt 编程时，你是否注意到很多对象可以设置“父对象”？比如： QPushButton* btn new QPushButton(parentWidget);这不是简单的层级结构，而是 Qt 强大而优雅的对象…...

编程日记 2025/8/13 8:11:37

基于FPGA的血氧和心率蓝牙监测系统设计-max30102

文章目录前言一、芯片手册分析二、串口接口的血氧模块使用讲解三、仿真时序分析四、代码分析1.蓝牙数据发送2.心率数据采集总结前言本产品的核心是基于心率传感器的智能心率监测系统，通过硬件端的心率传感器获取人体的心率和血氧浓度等信息，并进行实…...

编程日记 2025/8/8 14:32:29

华为首款鸿蒙电脑正式亮相，开启国产操作系统新篇章

5 月 8 日，华为在深圳举办鸿蒙电脑技术与生态沟通会，正式推出了备受瞩目的首款鸿蒙电脑，这一重大举措标志着国产操作系统在个人电脑（PC）领域实现了关键突破，为行业发展注入了新的活力。历经五年打磨&…...

编程日记 2025/8/13 8:11:37

Docker部署常见应用之Superset

文章目录使用 Docker 部署使用 Docker Compose 部署参考文章以下是使用 Docker 部署 Superset 并将存储配置为 MySQL 的详细步骤： 使用 Docker 部署获取Superset镜像: 使用Docker从官方仓库拉取Superset镜像：docker pull apache/superset:4.0.0创建 …...

编程日记 2025/8/8 14:32:24

触想CX-3588工控主板应用于移动AI数字人，赋能新型智能交互

一、行业发展背景随着AI智能、自主导航和透明屏显示等技术的不断进步，以及用户对“拟人化”、“沉浸式”交互体验的期待，一种新型交互终端——“移动AI数字人”正在加速实现规模化商用。各大展厅展馆、零售导购、教学政务甚至家庭场景中，移…...

编程日记 2025/8/13 8:08:18

关系代数操作之复杂扩展操作

除（Division） 定义：关系R为n度关系，关系S为m度关系，m<n,记作RS，关系是K（n-m）度关系数学描述： 相当于（RS）*S在R中的元组外连接&#xff08…...

编程日记 2025/8/13 8:07:07

STM32G070xx将Flash页分块方式存储，固定数据块存储，实现一次擦除多次写入

STM32G070xx将Flash页分块方式存储，固定数据块存储，实现一次擦除多次写入参考例程例程说明一、存储区数据结构二、读取存储区数据三、写入存储区数据四、测试函数五、测试结果参考例程 STM32G0xx使用LL库将Flash页分块方式存储数据实现一次擦除可多次…...

编程日记 2025/8/13 8:08:44

V4L2应用程序开发-- 控制流程

使用摄像头时，我们可以调整很多参数，比如： 对于视频流本身： 设置格式：比如V4L2_PIX_FMT_YUYV、V4L2_PIX_FMT_MJPEG、V4L2_PIX_FMT_RGB565 设置分辨率：1024*768等对于控制部分： 调节亮度调…...

编程日记 2025/8/13 8:02:16

《大数据技术之Scala》

这是一篇关于大数据技术中Scala语言的基础教程文章，主要介绍了Scala语言的发展历史、与Java的关系、语言特点、环境搭建、插件安装、编程基础、变量和数据类型、运算符、流程控制、函数式编程、面向对象编程、集合操作、模式匹配、异常处理、隐式转换和泛型等核心内…...

编程日记 2025/8/13 8:08:45

使用thymeleaf模版导出swagger3的word格式接口文档

1.pom配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.8.RELEASE</version></parent><properties><skipTests>true</skipTests&g…...

编程日记 2025/8/13 8:08:44

Android RecyclerView自带的OnFlingListener，Kotlin

Android RecyclerView自带的OnFlingListener，Kotlin Android启动应用时屏蔽RecyclerView滑动，延时后再允许滑动，Kotlin-CSDN博客使用了GestureDetectorRecyclerView的setOnTouchListener检测用户的快滑fling事件。发现RecyclerView也自带了监…...

编程日记 2025/8/13 8:07:08