- 博客(62)
- 收藏
- 关注
RSS订阅原创 Vue组件初始化时序与异步资源加载的竞态问题实战解析
isMapReady// 父组件})// 子组件// 执行操作})})组件生命周期 ≠ 资源就绪：Vue 的onMounted只保证 DOM 挂载完成，异步资源可能还没加载好。防御式编程：在访问异步资源前加判断，避免空指针。显式信号优于隐式依赖：用isMapReady代替“猜”资源是否就绪。调试技巧：学会用debugger调试是多么的重要这次问题让我深刻体会到，在异步世界里，永远不要假设资源已经就绪。组件通信就像两个人传递接力棒，必须确保对方准备好再放手。虽然最终用isMapReady。
2025-12-27 12:11:29
492
原创 前端并发控制的多种实现方案与最佳实践
前端并发控制是提升应用性能和用户体验的关键技术。本文深入探讨了多种并发控制方案，包括队列法、递归队列法、竞速法和分批处理法，以及它们的进阶特性如动态调整并发数、请求取消机制和进度反馈。我们还通过实际应用场景案例展示了并发控制的价值，并对比了浏览器原生方案与第三方库的适用场景。对于前端开发者，我们建议根据项目需求选择合适的并发控制方案。对于简单场景，原生队列法或分批处理法足够；对于复杂场景，递归队列法或竞速法更合适；
2025-12-21 21:40:18
798
原创 多引擎中英翻译API搭建与使用教程
前一段时间正好考了英语四六级嘛，当时我在刷题的时候就想，能不能自己搭建一个翻译服务，个性化的去定制适合自己学习平台，于是我就搞了一个简单的中英文翻译的服务。在本教程中，我们将学习如何使用Python构建一个支持多种翻译引擎的中英翻译API服务。该服务不仅支持Google翻译，还支持百度翻译，可以根据需求选择最适合的翻译引擎。
2025-12-18 22:32:21
741
1
原创 前端跨页面通信：从基础到工程化的全面指南
在现代Web应用开发中，跨页面通信已成为不可或缺的核心技术。随着单页应用(SPA)和微前端架构的普及，开发者需要在不同浏览器上下文（如标签页、窗口、iframe）之间传递数据和消息。本文将系统介绍前端跨页面通信的主流方法，从原理、应用场景到工程化实现，帮助开发者构建更高效、安全的通信架构。前端跨页面通信主要分为两大类：同源场景和跨域/跨窗口场景。每种场景下有不同的通信方式，各有优缺点和适用场景。同源场景下，通信方式主要基于浏览器的同源策略，允许同一协议、域名和端口的页面直接共享数据。主要方式包括：跨域/跨窗
2025-12-14 20:01:29
837
原创 前端网页加载进度条实现指南：Vue3+Vite工程化场景
网页加载进度条是一种提升用户体验的重要工具，它能让用户直观了解页面加载状态，减少等待时的焦虑感。在单页面应用(SPA)和现代前端框架如Vue3中，加载进度条尤为重要，因为SPA的路由切换和异步请求往往需要更长时间，用户容易误以为页面"卡死"。本文将从概念理解、第三方库快速实现和自定义组件实现三个维度，详细讲解如何在Vue3+Vite工程化场景中实现网页加载进度条。网页加载进度条是一种可视化界面元素，用于展示页面或资源加载的完成百分比 。它通常出现在页面顶部或特定位置，通过宽度变化或颜色渐变来直观传达加载状
2025-12-07 22:10:04
1058
原创 前端截图实现方案全解析：从基础到进阶（附完整代码）
用遮罩层覆盖页面；监听鼠标按下、移动、松开事件，绘制选择框；截图时只截取选择框对应的 DOM 区域（通过获取坐标）。前端截图的核心是“DOM → Canvas → 图片”的转换流程，选择方案时需权衡兼容性、性能、功能需求快速落地、兼容广：优先用 html2canvas；复杂样式、高性能：选 dom-to-image；简单场景、无依赖：用 Canvas 原生 API。同时，需重点关注跨域图片、截图模糊、CSS 兼容性这三个核心问题，按文中的解决方案可快速避坑。
2025-12-03 16:21:56
986
原创 使用pnpm构建高效Monorepo：从零到一的完整指南
pnpm Monorepo是现代前端开发的强大工具，通过合理配置和管理，可以显著提升开发效率和代码质量。遵循命名规范：使用作用域命名（如）避免命名冲突合理划分目录结构：区分apps/（应用）和packages/（共享包），保持边界清晰统一依赖管理：通过根目录安装共享依赖，避免版本碎片化使用工具链增强体验：集成Turborepo优化构建流程，使用Changesets管理版本定期维护和优化：清理未使用的依赖，更新过时的配置，保持项目健康随着项目规模扩大，Monorepo的优势会更加明显。
2025-12-01 19:42:54
879
原创 dotenv在JavaScript中的完整指南：从入门到企业级最佳实践
摘要： 环境变量是现代应用开发中管理配置的关键工具，通过dotenv库可将配置信息存储在.env文件中，实现代码与配置分离。dotenv将.env文件中的键值对加载到Node.js的process.env对象，提供安全性（避免敏感信息泄露）、灵活性（适配不同环境）和可维护性（集中管理配置）。基础用法包括安装dotenv、创建.env文件并通过require('dotenv').config()加载。进阶实践涉及多环境配置（如.env.development和.env.production）和构建工具集成（W
2025-11-23 16:34:12
899
原创 一次 MariaDB 崩溃后的完美恢复实战：从故障诊断到安全加固
摘要：本文记录了一次因服务器异常关机导致MariaDB启动失败的故障处理过程。通过分析日志发现InnoDB引擎因非正常关机导致数据一致性错误，进而无法启动。作者采用四步恢复方案：1) 强制只读模式导出数据；2) 彻底重装MariaDB；3) 导入备份数据；4) 进行安全加固。最终不仅成功恢复数据，还制定了五项长效预防措施，包括自动备份、版本锁定、服务监控等，形成了一套完整的"无损恢复+安全加固+长效预防"解决方案，为类似故障提供了可复用的处理思路。
2025-11-23 16:07:22
847
原创 从Promise.all陷阱到优雅解决方案：我的弹框加载实践
用户感知优先：即使牺牲部分代码简洁性，也要优先保证核心内容的快速呈现灵活应对网络波动：通过降级策略和超时控制，构建健壮的容错机制平衡代码复杂度与性能：根据业务需求选择合适的异步模式最终建议对非关键资源使用+独立处理对强依赖数据使用对用户体验敏感的内容使用拆分请求+预加载通过这种混合策略，我们既保留了并行请求的效率优势，又实现了部分数据的即时渲染，最终在代码可维护性和用户体验之间取得了最佳平衡。
2025-11-20 22:41:17
815
原创 一文带你理解JavaScript异步编程与事件循环机制
JavaScript异步编程是现代前端开发的核心能力，它通过事件循环机制实现单线程环境下的非阻塞操作。本文解析了JavaScript单线程特性与异步必要性，详细介绍了浏览器和Node.js的事件循环机制及任务队列结构。文章对比了回调函数、Promise和async/await三种异步实现方式的优缺点，阐述了微任务与宏任务的执行顺序规则，并提供了网络请求等实际应用场景的代码示例。理解这些异步编程原理对于开发高效、响应式的Web应用至关重要。
2025-11-20 22:20:48
1050
原创 10 分钟搞定 Token 无感刷新：再也不用反复重新登录了
无感刷新Token技术通过双Token机制有效平衡安全性与用户体验。核心方案包括：Access Token（短期有效）与Refresh Token（长期安全存储）协同工作；Axios拦截器自动捕获401错误并触发刷新流程；并发请求队列避免重复刷新。实现要点：服务器端需维护Refresh Token白名单/吊销列表，客户端需将Refresh Token存储在HttpOnly Cookie中。此方案可显著降低Token泄露风险（约80%），同时避免用户频繁重新登录（65%用户流失率问题），是现代Web认证系统的
2025-11-15 14:48:18
1237
原创 SSE通信技术详解：Node.js实现服务器端事件推送
SSE技术简介及应用：Server-Sent Events（SSE）是基于HTTP的单向实时数据推送技术，适用于服务器向客户端持续推送更新的场景（如实时通知、日志流等）。相比轮询和WebSocket，SSE具有轻量级、简单易用和自动重连等优势。核心特点包括：基于HTTP协议、长连接保持、事件驱动模型。Node.js实现SSE需设置特定响应头（如text/event-stream）并遵循数据格式规范，客户端通过EventSource API接收事件。SSE在实时性要求高但只需单向通信的场景中表现优异，是传统轮
2025-11-10 22:37:49
1175
原创 告别Docker Hub网络困扰！本地镜像打包上传服务器全攻略
当Docker Hub网络不给力时，“本地打包+FTP上传”无疑是最直接高效的替代方案。整个流程无需依赖外部仓库，操作步骤简单，同时避免了科学上网的配置成本和隐私泄露风险。无论是个人开发者部署小型应用，还是企业内网环境下的镜像迁移，这套方法都能完美解决你的痛点。按照本文的步骤操作，相信你能轻松完成Docker镜像从本地到服务器的迁移部署。如果在实操中遇到问题，欢迎在评论区留言交流！
2025-11-09 15:54:48
633
原创 WebSocket 完全指南：从原理到实战，搭建实时通信桥梁
摘要：WebSocket协议通过全双工实时双向通信解决了HTTP协议在实时场景中的痛点。文章详细解析了WebSocket的核心概念、与HTTP的差异、工作原理和数据帧结构，并提供了JavaScript实战示例，演示如何搭建WebSocket应用。此外还介绍了WebSocket的典型应用场景、常见错误解决方案以及进阶技巧，如单例模式和心跳机制，帮助开发者构建稳定的实时通信系统。
2025-11-07 21:44:08
1960
1
原创 WebSocket 核心 API 速查表
本文整理了WebSocket协议在前端开发中的核心知识点，包括连接初始化、属性方法、事件处理和常见错误解决方案。主要内容：1) WebSocket对象创建和连接初始化语法；2) readyState等关键属性的作用；3) send()、close()等核心方法的使用；4) open/message等事件回调的绑定方式；5) 常见错误类型及处理建议；6) 标准化关闭状态码说明；7) 实战工具函数如连接检测、安全发送和心跳机制实现。该速查表覆盖了WebSocket开发的主要场景，可作为日常开发的快速参考指南。
2025-11-07 21:41:42
819
原创 数据库迁移踩坑实录：从排序规则不兼容到后台报错全解决
数据库迁移中的常见问题及解决方案 本文分享了从MySQL 8.0迁移到MariaDB 10.5过程中遇到的三个典型问题：1) utf8mb4_0900_ai_ci排序规则不兼容，需替换为utf8mb4_unicode_ci；2) 修改表结构时权限不足和外键约束问题，需调整权限并临时移除外键；3) 后台查询时字符集混合错误，需统一所有表的排序规则。针对每个问题提供了详细的解决方案，包括SQL修改示例和操作步骤，为开发者处理类似数据库兼容性问题提供了实用参考。
2025-11-05 15:08:56
765
原创 Nginx代理配置的“双斜杠陷阱“：从IP到域名的完整排查与解决指南
摘要： Vue前端调用/api/login接口返回404，Nginx代理导致路径变为//login。问题根源是Nginx的proxy_pass路径处理规则：结尾加斜杠会移除/api但产生双斜杠，不加斜杠则保留/api导致后端404。 解决方案： 使用rewrite显式剥离/api前缀： rewrite ^/api/(.*)$ /$1 break; proxy_pass结尾不加斜杠： proxy_pass http://example.com:3000; 重建容器时禁用缓存（--no-cache）。 核心经验
2025-11-04 22:34:33
1284
原创 新手友好！Debian 服务器后端部署全攻略
本文分享了在Debian服务器上部署Java和Nest后端项目的完整流程。首先介绍了必备准备工作，重点强调了防火墙和安全组配置的重要性。随后分别详细说明了Java项目JAR包的部署方法(使用nohup保持后台运行)和Nest项目的PM2管理方式(包括安装依赖和常用PM2命令)。最后提供了服务验证方法，建议通过ping测试、端口访问和浏览器测试确认部署成功。全文采用新手友好的语言风格，包含实用命令和常见问题解决方法，帮助开发者顺利完成服务器端项目部署。
2025-11-03 16:48:33
324
原创 基于 Debian 服务器的前端项目部署完整教程
本文详细介绍了在Debian服务器上部署Vue/React前端项目的完整流程。首先确保Nginx和UFW防火墙已正确配置，本地项目需通过npm run build生成dist/build静态文件。服务器端创建专用目录/var/www/your-frontend并上传打包文件，通过SCP或FTP工具传输。重点配置Nginx站点规则，包括端口监听、静态资源缓存和单页应用路由处理，可选配置反向代理解决跨域问题。最后验证访问并解决常见问题如403错误、页面刷新404等。整个流程涵盖从本地打包到线上部署的关键环节，提
2025-11-03 16:47:42
425
原创 【保姆级教程】Debian 服务器 MariaDB/Mysql 配置 Windows 远程连接全流程
本文详细介绍如何在Windows端远程连接Debian服务器上的MariaDB数据库。主要内容包括：创建远程访问专用账号（区分安全方案和测试方案），修改MariaDB配置允许远程连接，配置服务器防火墙开放3306端口，设置云服务器安全组规则，以及使用Navicat客户端进行连接的具体步骤。文章提供完整操作命令和详细注释，并包含常见问题排查方法和MariaDB安装指引，帮助用户实现安全可靠的远程数据库管理。关键点在于正确配置账号权限、网络访问控制和安全组规则，确保连接可用性的同时兼顾安全性。
2025-11-03 16:46:22
1202
原创 Debian 服务器环境搭建全指南：从工具选型到项目部署实战
本文详细介绍了在Debian系统上搭建全栈项目服务器环境的完整流程。首先进行系统基础配置，包括系统更新和防火墙设置，筑牢安全防线。其次安装核心工具：选择MariaDB作为关系型数据库，Nginx作为Web服务器和反向代理，Redis用于缓存，JDK17运行Java应用，NVM管理Node.js版本。重点讲解了PM2进程管理工具，通过NestJS项目实例演示如何实现服务后台运行、崩溃自动重启等关键功能。整个流程涵盖全栈项目所需组件，提供选型理由和实战示例，帮助开发者快速搭建安全稳定的生产环境。
2025-11-03 16:45:18
1074
原创 VSCode插件开发实战：从零到发布的技术大纲
本文详细介绍了VSCode插件开发的完整流程和技术要点。首先讲解了开发环境搭建，包括Node.js、VSCode等工具的安装，以及使用Yeoman生成器创建插件项目的方法。接着阐述了VSCode插件的核心概念和生命周期，包括Extension Host进程、激活事件和主入口文件的实现。文章重点介绍了常用的VSCode API开发实践，包括命令注册、状态栏控制、Webview自定义UI开发、语言功能增强以及文件系统操作等关键技术。最后还涵盖了用户交互设计的实现方法，如快速输入和信息提示等界面元素的使用。
2025-10-31 23:22:53
1000
原创 Cesium地图弹框实现方案演进：从组件化到动态挂载的技术探索
地图弹框实现方案演进 方案演进过程 从最初纯Vue组件化方案到最终动态挂载方案的技术探索： 传统Vue组件方案 组件化实现，代码清晰 与项目架构不兼容 DOM层级问题导致无法使用 原生JS+HTML字符串方案 直接操作DOM绕过Vue限制 实现简单但维护性差 全局函数污染严重 动态组件挂载方案 使用Vue.createApp动态创建实例 完美结合Vue特性与DOM操作 解决架构限制同时保持可维护性 最终采用动态挂载方案，实现了： ✅ 弹框精准定位 ✅ 完整Vue生态支持 ✅ 不修改原有架构 ✅ 良好维护性
2025-10-31 23:12:10
521
原创 AI编程工具的体验与分享，在AI时代，如何选择更适合自己的编译器来帮助自己进行开发
主流AI编程工具评测与选择指南 当前AI编程工具主要分为专业AI IDE（如Cursor、Windsurf）和传统编辑器+AI插件（如VS Code+Copilot）两类。Cursor提供顶尖编码能力但额度有限；Windsurf是性价比更高的替代方案；VS Code适合追求灵活性的开发者；Kiro专注Claude模型极简体验；Qoder和Comate提供本土化适配；Lingma是完全免费的入门选择。选择时需综合考虑功能、模型性能、易用性、成本和个人习惯，没有绝对最优，只有最适合。
2025-10-29 22:30:52
1633
原创 Web Worker：释放前端性能的“后台线程”技术
Web Worker 是一种浏览器技术，允许在后台线程中执行耗时任务，避免阻塞主线程导致页面卡顿。它分为专用 Worker（一对一通信）和共享 Worker（多线程共享），适用于计算密集型任务、大文件解析等场景。Worker 无法访问 DOM，需通过 postMessage 通信，主线程可随时终止 Worker。共享 Worker 需要端口通信，适合多标签页数据同步。合理使用 Web Worker 能显著提升前端应用性能和用户体验。
2025-10-08 20:15:54
691
原创 从视口到容器：CSS 容器查询完全指南
容器查询是响应式设计的重大进步，允许样式基于容器尺寸而非视口调整。相比传统媒体查询，它能解决组件在不同尺寸容器中的自适应问题。使用时需先通过container-type定义容器，再结合@container编写查询条件。容器查询可与clamp()函数搭配实现动态尺寸，并适用于组件化开发。目前主流浏览器已部分支持该特性，可通过polyfill或优雅降级处理兼容性问题。容器查询让组件实现"自感知"响应，是未来CSS布局的重要特性。
2025-10-06 21:01:35
1101
原创 Service Worker：前端离线化与性能优化的核心技术
摘要：Service Worker是PWA的核心技术，运行在浏览器后台线程，支持离线缓存、请求代理和消息推送。它具有独立生命周期，通过缓存策略（如缓存优先、网络优先）优化性能。注册后需编写脚本处理安装、激活和请求拦截，并注意HTTPS要求和版本化缓存管理。Service Worker适用于离线应用、性能优化等场景，显著提升Web应用体验，是现代前端开发的重要技能。
2025-10-01 20:45:18
823
原创 前端登录加密实战：从原理到落地，守护用户密码安全
摘要： 本文探讨Web登录场景中前端加密的必要性及实现方案。前端加密作为HTTPS的补充防护，可避免密码明文在传输或临时存储中泄露。核心原则包括使用成熟加密库、后端管理密钥、加密结果不存储以及与后端协同验证。对比哈希加密、HMAC和RSA三种方案后，推荐RSA非对称加密（公钥加密、私钥解密）作为高安全性场景的最优解。实战部分以Vue3为例，通过jsencrypt库实现RSA加密登录流程，包括公钥获取、前端加密封装及登录请求处理，强调定期轮换密钥、分段加密等最佳实践，确保敏感数据安全。
2025-09-26 21:56:50
1103
原创 Vite环境配置深度解析：从路径别名到手动注入的全流程指南
Vite环境配置最佳实践与核心机制解析：通过路径别名优化模块导入，详解Node.js在前端工程中的关键作用，对比process与import.meta.env的环境变量处理机制。文章重点介绍loadEnv函数的多环境加载策略，提供自定义环境目录和手动注入变量的灵活方案，总结自动与手动注入的特点差异，最终形成安全高效的环境配置体系。
2025-09-24 15:14:21
547
原创 Nginx反向代理配置全流程实战：从环境搭建到HTTPS部署
本文详细介绍了使用Nginx配置反向代理的完整流程，解决"域名+端口可访问但直接域名访问失败"的问题。主要内容包括：1) 创建sites-available目录集中管理配置；2) 修改nginx.conf主配置文件引入自定义配置；3) 编写反向代理规则实现HTTP自动跳转HTTPS及后端服务转发；4) 后端服务调整为HTTP协议并绑定0.0.0.0；5) 常见错误排查方法及最佳实践建议。通过规范配置，最终实现域名直接访问且HTTPS加密，同时提升服务可维护性和安全性。
2025-09-23 19:15:53
1757
原创 保姆级教程：windows和linux双系统的电脑如何无副作用，安全删除linux
摘要：本文介绍了如何彻底卸载双系统中的Linux系统并删除其开机引导。步骤包括：1.以管理员身份运行命令提示符，使用diskpart工具定位EFI分区；2.为EFI分区分配盘符后，通过记事本访问并删除Linux引导文件夹；3.移除分配的盘符。同时提供了删除Linux磁盘数据的参考链接。该方法可解决删除Linux后出现的GRUB引导问题，确保系统完全卸载干净。
2025-09-22 14:35:10
1256
3
原创 带你入门前端的滑块验证怎么做
本文介绍了基于Vue的滑块验证组件miitvip/captcha的集成与应用方法。文章首先概述了该组件轻量易用、支持自定义主题和灵活接口的特点，详细讲解了安装配置流程，包括npm/yarn安装和全局/局部引入方式。重点解析了核心属性配置，如接口地址、验证参数和请求头设置，以及主题颜色等外观定制选项。此外，还介绍了事件处理机制，包括初始化完成、验证成功和失败事件的响应方法，并提供了标准的前后端接口交互规范。最后通过完整示例代码展示了组件的实际应用场景，帮助开发者快速实现安全可靠的滑块验证功能。
2025-09-20 21:32:54
973
原创 前端缓存深度解析：localStorage 到底是同步还是异步？
摘要： 本文深入解析了localStorage的同步特性及其性能影响。作为浏览器提供的同步存储API，localStorage操作会阻塞主线程直至硬盘IO完成，可能导致页面卡顿。文章通过原理分析、流程拆解和代码测试验证了同步机制，并对比了异步存储方案IndexedDB的优势。针对开发实践，建议控制数据量、减少频繁读写，对大数据场景优先选用IndexedDB。理解不同存储方案的底层设计差异，有助于前端开发者在性能与便利性间做出合理权衡。
2025-09-18 18:41:45
842
原创 一文带你入门前端模块化
前端模块化是现代前端开发的核心思想，通过将代码拆分为独立模块，解决全局作用域污染、依赖混乱等问题。主流模块化规范包括：CommonJS（同步加载，适用于Node.js）、ES Modules（ES6标准，支持静态分析）、AMD（异步加载，适合浏览器早期）和UMD（兼容多环境）。模块化工具链如Webpack能处理依赖和打包优化。最佳实践建议优先使用ESM、遵循单一职责原则，并避免循环依赖。模块化显著提升了代码的可维护性、复用性和开发效率。
2025-09-14 22:19:14
1003
原创 Vue3 中实现按钮级权限控制的最佳实践：从指令到组件的完整方案
摘要 本文介绍了在Vue3中实现按钮级权限控制的两种方案：自定义指令和组件封装。自定义指令方案通过v-permission指令实现轻量级权限控制，支持权限校验、元素隐藏/禁用等逻辑，适合简单场景。组件封装方案提供了更灵活的权限按钮组件，支持多权限判断、禁用状态和提示信息，适用于复杂交互。两种方案均建议结合后端权限验证，确保系统安全性。文中提供了完整代码示例，帮助开发者快速集成细粒度权限控制功能。
2025-09-10 19:54:52
1235
原创 解决JavaScript异步配置加载竞态条件问题
本文探讨了前端开发中异步配置加载导致的竞态条件问题及解决方案。通过地图应用实例，作者展示了当配置加载与应用初始化同时进行时，可能因配置未就绪而引发错误。 核心解决方案包括： 使用Promise管理异步配置加载 实现配置缓存避免重复请求 提供等待机制确保配置就绪 状态跟踪明确加载状态 具体实现通过配置加载管理器和ensureConfigLoaded工具函数，确保应用在使用配置前等待加载完成。该方案具有无竞态条件、网络适应性强、性能优化等优势，并可扩展至多配置文件管理场景。最后，作者还提出了配置变更监听的未来优
2025-09-09 12:26:16
1167
原创 从固定 px 到响应式：Vue + Vite 项目响应式改造实战，解决前端不适配的问题
本文介绍如何使用postcss-px-to-viewport插件在Vue+Vite项目中快速实现响应式布局。该方案无需重构代码，通过自动将px转换为vw单位，保持设计稿比例。文章详细讲解了插件安装配置、特殊场景处理（如1px边框保留）、媒体查询优化等关键步骤，并提供了常见问题解决方案。这种零侵入性的CSS方案特别适合已完成开发但需要响应式适配的项目，能在不修改业务代码的情况下实现多端适配。
2025-09-08 23:07:22
519
原创 .env 文件全解析：从入门到实战的项目环境配置指南
.env文件是管理项目环境变量的重要工具，支持多种开发框架（Vue/React/Node等）。它以键值对形式存储配置，能区分开发和生产环境（如.env.development/.env.production）。使用时需注意：1）敏感信息要加入.gitignore；2）变量值默认为字符串需转换类型；3）修改后需重启生效。不同框架调用方式不同（Vue用process.env，React用import.meta.env等）。合理使用.env文件可提升配置灵活性和安全性。
2025-09-07 13:17:30
883
原创 Vue 实现文件拖拽上传与粘贴上传：从原理到实践
文件上传组件实现方案 该Vue组件实现了拖拽上传和粘贴上传两种高级文件上传方式，包含以下核心功能： 交互方式支持： 拖拽上传（HTML5 Drag & Drop API） 粘贴上传（Clipboard API） 传统文件选择 核心处理逻辑： 文件验证（大小限制、类型检查、去重） 实时预览生成（图片类型） 上传进度跟踪 错误处理与用户反馈 技术实现要点： 使用Vue3 Composition API 通过事件监听处理拖拽和粘贴操作 利用URL.createObjectURL实现本地预览 包含完整的生命
2025-09-06 12:42:20
945
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人