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

图片粘贴上传实现

news 来源：原创 2025/9/19 9:23:26

图片上传 html demo

直接粘贴本地运行查看效果即可，有看不懂的直接喂给 deepseek 会解释的很清晰

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粘贴图片上传示例 - 使用场景，粘贴桌面图片上传、粘贴word 文档中图片上传、直接截图上传等</title><style>body {font-family: Arial, sans-serif;padding: 20px;}.upload-area {width: 100%;height: 200px;border: 2px dashed #ccc;display: flex;align-items: center;justify-content: center;color: #666;font-size: 18px;margin-bottom: 20px;}.file-list {margin-top: 20px;}.file-item {margin-bottom: 10px;padding: 10px;border: 1px solid #ddd;background-color: #f9f9f9;}.file-item.uploading {background-color: #e0f7fa;}.file-item.done {background-color: #e8f5e9;}.file-item.error {background-color: #ffebee;}</style>
</head>
<body><h1>粘贴图片上传示例</h1><div class="upload-area">请在此区域粘贴图片</div><div class="file-list"><h2>文件列表</h2><div id="file-list-container"></div></div><script>// 模拟语言包const t = (key) => {const translations = {'examination.pasteNoContent': '粘贴内容为空',};return translations[key] || key;};// 生成唯一 IDconst uuidv4 = () => {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {const r = (Math.random() * 16) | 0;const v = c === 'x' ? r : (r & 0x3) | 0x8;return v.toString(16);});};// 文件上传前的校验const onBeforeUpload = async (file, { maxHeight, maxWidth, size, maxCount, t, fileList }) => {if (fileList.length >= maxCount) {alert(`最多只能上传 ${maxCount} 张图片`);return false;}if (file.size > size) {alert(`文件大小不能超过 ${size / 1024 / 1024}MB`);return false;}return true;};// 模拟文件上传函数const fileUpload = (file, { onSuccess, onError }) => {setTimeout(() => {if (Math.random() > 0.5) {onSuccess({ url: 'https://example.com/uploaded-image.jpg' });} else {onError('上传失败，请重试');}}, 2000); // 模拟 2 秒上传时间};// 数据处理函数const dataHandle = ({ file, fileList }) => {return { file, fileList };};// 粘贴图片上传处理函数const handelPasteImageUpload = async (event, {t,resource = { images: [] },onStartUpload,onUploadSuccess,onUploadError,imageUploadLimitConfig,}) => {const fileList = resource.images || [];const clipboardData = event.clipboardData;if (clipboardData) {const items = clipboardData.items || [];if (items.length <= 0) {alert(t('examination.pasteNoContent'));return;}for (let i = 0; i < items.length; i++) {const item = items[i];if (item.type.indexOf('image') !== -1) {event.preventDefault(); // 阻止默认行为const originFileObj = item.getAsFile(); // 获取文件对象// 构建文件数据对象const fileDataObj = {originFileObj,uid: uuidv4(),lastModified: originFileObj.lastModified,name: originFileObj.name,size: originFileObj.size,type: originFileObj.type,};const { maxHeight, maxWidth, size, maxCount } = imageUploadLimitConfig;// 文件上传前的校验const flag = await onBeforeUpload(originFileObj, {maxHeight,maxWidth,size: size.image,maxCount: maxCount.image,t,fileList,});if (flag) {const newFileList = [...fileList, fileDataObj].map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'uploading' };}return item;});// 调用开始上传回调onStartUpload(dataHandle({ file: fileDataObj, fileList: newFileList }));// 模拟文件上传fileUpload(originFileObj, {onSuccess: (response) => {const updatedFileList = newFileList.map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'done', response };}return item;});onUploadSuccess(dataHandle({ file: fileDataObj, fileList: updatedFileList }));},onError: (error) => {const updatedFileList = newFileList.map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'error', response: error };}return item;});onUploadError(dataHandle({ file: fileDataObj, fileList: updatedFileList }));},});}}}}};// 初始化document.addEventListener('paste', (event) => {handelPasteImageUpload(event, {t,resource: { images: [] },onStartUpload: (data) => {console.log('开始上传:', data);renderFileList(data.fileList);},onUploadSuccess: (data) => {console.log('上传成功:', data);renderFileList(data.fileList);},onUploadError: (data) => {console.error('上传失败:', data);renderFileList(data.fileList);},imageUploadLimitConfig: {maxHeight: 1000,maxWidth: 1000,size: { image: 5 * 1024 * 1024 }, // 5MBmaxCount: { image: 10 },},});});// 渲染文件列表const renderFileList = (fileList) => {const container = document.getElementById('file-list-container');container.innerHTML = fileList.map((file) => `<div class="file-item ${file.status}"><strong>${file.name}</strong> - ${file.status}${file.response ? `<br>响应: ${JSON.stringify(file.response)}` : ''}</div>`).join('');};</script>
</body>
</html>

图片粘贴上传实现

图片上传 html demo 直接粘贴本地运行查看效果即可，有看不懂的直接喂给 deepseek 会解释的很清晰 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…...

编程日记 2025/9/19 9:23:26

C++--STL库-List

目录 1.list 的基本使用 1.1 创建和初始化 1.2. 插入元素 1.3. 删除元素 1.4. 访问元素 1.5 遍历 1.6 总结 list是C标准库（STL）中的双向链表容器，属于<list>头文件。它的特点是： 动态大小：可以随时插入…...

编程日记 2025/9/18 18:17:31

kubeadm拉起的k8s集群证书过期的做法集群已奔溃也可以解决

kubeadm拉起的k8s集群证书过期的做法这个是很久之前遇到的了，今天有空（心血来潮）就都回忆回忆写在这里为爱发光，部分内容来自arch先生（死党）的帮助。有时候有很多部门提了建k8s的需求，有些是临…...

编程日记 2025/9/18 20:30:28

idea连接gitee(使用idea远程兼容gitee)

文章目录先登录你的gitee拿到你的邮箱找到idea的设置选择密码方式登录填写你的邮箱和密码登录成功先登录你的gitee拿到你的邮箱具体位置在gitee–>设置–>邮箱管理找到idea的设置选择密码方式登录填写你的邮箱和密码登录成功...

编程日记 2025/9/16 15:04:53

Kafka 简介

Kafka 简介 Apache Kafka 是一个开源的分布式流处理平台，广泛应用于实时数据流处理、日志管理、消息传递等场景。Kafka 最初由 LinkedIn 开发，并于 2011 年捐献给 Apache 软件基金会。 Kafka 的设计目标是高吞吐量、低延迟和高可用性，它能够…...

编程日记 2025/9/18 13:54:50

Ubuntu22.04 Deepseek-R1本地容器化部署/内网穿透/OPENWEBUI，打造个人AI助手！

1. 前言本地部署DeepSeek并实现内网穿透，为家庭成员提供强大的AI支持。通过使用Ollama、Docker、OpenWebUI和Nginx，内网穿透，我们可以轻松实现快速响应和实时搜索功能。 2.软硬件环境系统：ubuntu22.04, cuda12GPU: RTX3080Ti …...

编程日记 2025/9/16 16:48:19

红蓝对抗之常见网络安全事件研判、了解网络安全设备、Webshell入侵检测

文章目录研判（入侵检测） 设备经典网络云网络异常HTTP请求Webshell分析 Webshell 的分类Webshell 的检测主机层面流量层面附录常见端口漏洞…...

编程日记 2025/9/19 1:55:21

Linux部署DeepSeek r1 模型训练

之前写过一篇windows下部署deepseekR1的文章，有小伙伴反馈提供一篇linux下部署DeepSeek r1 模型训练教程，在 Linux 环境下，我找了足够的相关资料，花费了一些时间，我成功部署了 DeepSeek R1 模型训练任务，结…...

编程日记 2025/9/19 7:57:30

【大模型】DeepSeek：AI浪潮中的破局者

【大模型】DeepSeek：AI浪潮中的破局者引言：AI 新时代的弄潮儿DeepSeek：横空出世展锋芒（一）诞生背景与发展历程（二）全球影响力初显探秘 DeepSeek 的技术内核（一）独特的模…...

编程日记 2025/9/18 15:49:35

寒假学习总结

整个寒假都走在数据结构与算法的路上，深入学习了其中多个板块，刷了一些与之对应的题目，下面来一期总结（c） （emmm，主播在寒假试着去学习了几大语言的语法基础（丢丢） 如Ja…...

编程日记 2025/9/19 22:57:13

自愈网络的定义、其为用户带来的益处、具体的使用案例

在当今高度互联的世界中，网络稳定性和可靠性对于各种应用场景至关重要。无论是企业的日常运营、智能家居的便捷控制，还是工业网络的自动化管理，网络的任何中断都可能带来不可估量的损失和不便。正是基于这种需求，以太联—Intellin…...

编程日记 2025/9/19 2:55:32

NumPy的基本使用

在 Python 的数据科学与数值计算领域，NumPy 无疑是一颗耀眼的明星。作为 Python 中用于科学计算的基础库，NumPy 提供了高效的多维数组对象以及处理这些数组的各种工具。本文将带您深入了解 NumPy 的基本使用，感受它的强大魅力。一、安装与导…...

编程日记 2025/9/17 22:05:07

HTTP 与 HTTPS：协议详解与对比

文章目录概要一. HTTP 协议 1.1 概述 1.2 工作原理 1.3 请求方法 1.4 状态码二. HTTPS 协议 2.1 概述 2.2 工作原理 2.3 SSL/TLS 协议 2.4 证书三. HTTP 与 HTTPS 的区别四. 应用场景 4.1 HTTP 的应用场景 4.2 HTTPS 的应用场景概要 HTTP（Hy…...

编程日记 2025/9/19 22:37:02

从零开始构建一个语言模型中vocab_size（词汇表大小）的设定规则

从零开始构建一个语言模型就要设计一个模型框架，其中要配置很多参数。在自然语言处理任务中，vocab_size（词汇表大小）的设定是模型设计的关键参数之一，它直接影响模型的输入输出结构、计算效率和内存消耗。本文是在我前文的基础上讲解的：从零开始构建一个小型字符级语言…...

编程日记 2025/9/17 22:39:30

斐波那契数列模型：在动态规划的丝绸之路上追寻斐波那契的足迹（上）

文章目录引言递归与动态规划的对比递归解法的初探动态规划的优雅与高效自顶向下的记忆化搜索自底向上的迭代法性能分析与比较小结引言斐波那契数列，这一数列如同一条无形的丝线，穿越千年时光，悄然延续其魅力。其定义简单而优美&#xff…...

编程日记 2025/9/13 8:58:06

RT-Thread+STM32L475VET6——ADC采集电压

文章目录前言一、板载资源二、具体步骤1.打开CubeMX进行配置1.1 使用外部高速时钟，并修改时钟树1.2 打开ADC1的通道3，并配置为连续采集模式(ADC根据自己需求调整）1.3 打开串口1.4 生成工程 2. 配置ADC2.1 打开ADC驱动2.2 声明ADC2.3 剪切stm…...

编程日记 2025/9/15 15:42:32

基于Django快递物流管理可视化分析系统（完整系统源码+数据库+详细开发文档+万字详细论文+答辩PPT+详细部署教程等资料）

文章目录基于Django快递物流管理可视化分析系统（完整系统源码数据库详细开发文档万字详细论文答辩PPT详细部署教程等资料）一、项目概述二、项目说明三、研究意义四、系统设计技术架构五、功能实现六、完整系统源码数据库详细开发文档万字详细论文答辩P…...

编程日记 2025/9/13 8:57:57

【Pandas】pandas Series reindex_like

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐，使其具有相同的索引Series.case_when(caselist)用于根据条件列表对 Series 中的元素进行条件判断并返回相应的值Series.drop([lab…...

编程日记 2025/9/18 13:45:52

Ollama安装和迁移，以及部署DeepSeek模型

什么是 Ollama Ollama 是大语言模型管理工具，它的主要作用是简化大语言模型的本地化部署和运行。如果你想调用本地模型，保护个人隐私，构建个人知识库，那你可以考虑使用 Ollama。 Ollama 的官网是 https://ollama.com/，正如官网所说，“Get up and running with large l…...

编程日记 2025/9/19 8:06:22

【数据挖掘】

数据挖掘目录：1. 数据转换2. 属性选择3. 独立于方案的选择4. 探索空间5. 具体方案的选择6. 离散化数值属性无监督离散化基于熵的离散化其他离散化方法 k-means算法原理算法步骤优缺点优点缺点代码示例（使用Python和scikit-learn库）代码解释…...

编程日记 2025/9/19 18:09:18

芝加哥学派（Chicago School）：金融与经济学的创新力量（中英双语）

芝加哥学派：金融与经济学的创新力量在经济学和金融学的历史上，有一个学派的影响力不容忽视，那就是芝加哥学派（Chicago School）。芝加哥学派不仅在学术界广受推崇，也深刻影响了全球的经济政策和金融市场。…...

编程日记 2025/9/19 4:29:07

web入侵实战分析-常见web攻击类应急处置实验1

场景说明： 某天运维人员发现在/opt/tomcat8/webapps/test/目录下，多出了一个index_bak.jsp这个文件， 并告诉你如下信息操作系统：ubuntu-16.04业务：测试站点中间件：tomcat开放端口：22&#x…...

编程日记 2025/9/19 22:17:20

.NET SixLabors.ImageSharp v1.0 图像实用程序控制台示例

使用 C# 控制台应用程序示例在 Windows、Linux 和 MacOS 机器上处理图像，包括创建散点图和直方图，以及根据需要旋转图像以便正确显示。这个小型实用程序库需要将 NuGet SixLabors.ImageSharp包（版本 1.0.4）添加到.NET Core 3.1/ …...

编程日记 2025/9/17 9:37:28

基于ffmpeg+openGL ES实现的视频编辑工具-字幕添加（六）

在视频编辑领域，字幕的添加是一项极为重要的功能，它能够极大地丰富视频内容，提升观众的观看体验。当我们深入探究如何实现这一功能时，FreeType 开源库成为了强大助力。本文将详细阐述借助 FreeType 库生成字幕数据的过程，以及如何实现字幕的缩放、移动、旋转、颜色修改、对…...

编程日记 2025/9/19 22:45:07

SpringMVC新版本踩坑[已解决]

问题： 在使用最新版本springMVC做项目部署时，浏览器反复500，如下图： 异常描述： 类型异常报告消息Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [int] not specifie…...

编程日记 2025/9/18 20:33:19

【科研绘图系列】R语言绘制SCI论文图合集

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载Load dataFigure 1Fig 1B: functional assays adhensionFIG 1C: Functional assays OPK Figure 2Fig 2C: Settings and function fo…...

编程日记 2025/9/19 9:19:58

间隔连续问题

间隔连续问题 1. 数据结构：某游戏公司记录的用户每日登录数据表名：game_user 字段名：id（用户id）、dt（日期） 2. 需求： ① 创建表 ② 计算每个用户最大的连续登录天数&#xff0c…...

编程日记 2025/9/19 15:58:34

3月营销日历：开启春日盛宴，绽放生活魅力

关键营销节点∶惊蛰、女生节、妇女节、植树节、315消费者权益日、春分营销关键词养生、女生魅力、感恩女性、环保、品质 01.重点关注品类春季服饰：如轻薄外套、春装等，适合惊蛰后的市场需求； 美妆护肤：妇女节期间&#xf…...

编程日记 2025/9/18 20:31:13

网络工程师（48）传输层概述

前言传输层（Transport Layer）是计算机网络体系结构中的关键层次之一，主要负责在源端和目的端之间提供端到端的数据传输服务。一、位置与功能传输层位于OSI（开放系统互连）参考模型的第四层，介于网络层和应…...

编程日记 2025/9/17 14:28:21

字符串函数和结构题内存对齐

图下为函数使用： #include <ctype.h>int main() {int ret isdigit(Q);printf("%d\n", ret);return 0; }int main() {printf("%c\n", toupper(a));printf("%c\n", tolower(A));return 0; }...

编程日记 2025/9/17 14:28:19

同花顺C++面试题及参考答案

对 C 和 C++ 哪个更熟悉？在编程语言的学习与实践中，我对 C++ 更为熟悉。C 语言作为一门经典的编程语言，以其高效、灵活和接近硬件的特性，在系统编程、嵌入式开发等领域占据着重要地位。它提供了丰富的底层操作能力，如指针操作、内存管理等，为开发者直接控制计算机资源提…...

编程日记 2025/9/19 17:26:55

Python JSON的深度解析：从基础到应用

Python JSON的深度解析：从基础到应用 flyfish 什么是JSON？ JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于一个子集的JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999…...

编程日记 2025/9/19 10:44:58

创建三个节点

1. 节点克隆根据教程Hadoop编译安装-CSDN博客将一台机器的hadoop的环境搭建好。在虚拟机的列表中选中一台机器，右键—>管理—>克隆填好【虚拟机名称】，选择本地存储位置，点击完成，就节点克隆完成了。 2. 修改IP地址编…...

编程日记 2025/9/18 16:50:57

滤波器 | 原理 / 分类 / 特征指标 / 设计

注：本文为 “滤波器” 相关文章合辑。未整理去重。浅谈滤波器之 —— 啥是滤波器原创 RF 小木匠射频学堂 2020 年 03 月 25 日 07:46 滤波器，顾名思义，就是对信号进行选择性过滤，对不需要的信号进行有效滤除。按照其传输信…...

编程日记 2025/9/19 16:30:37

Flutter - 初体验

项目文件目录结构介绍注：创建 Flutter 项目名称不要包含特殊字符，不要使用驼峰标识 // TODO 开发中运行一个 Flutter 三种启动方式 Run 冷启动从零开始启动Hot Reload 热重载执行 build 方法Hot Restart 热重启重新运行整个 APP 先看效果&#xff0c…...

编程日记 2025/9/19 14:35:48

OSPF（开放路径最短优先）

ospf优先级：内部优先级默认为10，外部优先级默认为150 1.ospf的三张表 （1）邻居表 <记录邻居状态和关系> （2）拓扑表 <链路状态数据库> （3）路由表 <对链路状态数据库进…...

编程日记 2025/9/19 4:30:16

SpringBoot 排除一些包的注入

文章目录需求一、使用 ComponentScan 需求在系统迭代的过程中，有一些 Controller 大批量的不再使用，或者有一些接口我们不想再提供给外界一、使用 ComponentScan SpringBootApplication(scanBasePackages "com.zrb.excludeSomePkg") Comp…...

编程日记 2025/9/19 5:25:16

【Python爬虫(21)】从0到1：Python与MySQL的深度融合

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/9/19 16:52:08

数据结构-----双向链表

一、双向循环列表 head.h #ifndef __head_h__ #define __head_h__ #include <stdio.h> #include <string.h>…...

编程日记 2025/9/19 16:26:50

idea 无法下载源码

作为一个程序猿，难免会跟源码打交道，可是在下载源码有时候，会提示找不到对象，这是什么原因呢？今天我们来解决这个问题。问题：idea无法下载源码 Cannot download sources Sources not found for:org.sprin…...

编程日记 2025/9/19 13:06:52

计算机网络-OSI七层参考模型与数据封装，网络安全零基础入门到精通实战教程！

目录一、网络 1、网络的定义 2、网络的分类 3、网络的作用 4、网络的数据传输方式 5、网络的数据通讯方式二、OSI七层参考模型 1、网络参考模型定义 2、分层的意义 3、分层与功能 4、TCP\IP五层模型三、参考模型的协议 1、物理层 2、数据链路层 3、网络层 4…...

编程日记 2025/9/19 8:51:45

洛谷 P2234 [HNOI2002] 营业额统计（详解）c++

题目链接：P2234 [HNOI2002] 营业额统计 - 洛谷 1.题目分析输入输出样例：根据题目知第一天的最小波动值为第一天的营业额，所以第一天的最小波动值是5，算出第二天的最小波动值就说拿前面的数分别减当前的数，并且取一个…...

编程日记 2025/9/18 9:51:41

Go日期时间处理工具Carbon

**注意：**本文大部分内容摘抄自-https://github.com/dromara/carbon/blob/master/README.cn.md使用文档一、简介一个轻量级的、易于使用的、语义智能的日期时间处理库，支持链式调用，已被 awesome-go 收录，现已经捐赠给了 drom…...

编程日记 2025/9/19 5:11:40

【Bert】自然语言（Language Model）入门之---Bert

every blog every motto: Although the world is full of suffering， it is full also of the overcoming of it 0. 前言对bert进行梳理论文： BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding 时间：…...

编程日记 2025/9/19 7:28:27

鸿蒙NEXT开发-网络管理

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识目录 1. 网络管理-应用权限 1.1 概述 1.2 配…...

编程日记 2025/9/19 16:02:16

ceph HEALTH_WARN clock skew detected on mon.f, mon.o, mon.p, mon.q

问题 ceph health detail[WRN] MON_CLOCK_SKEW: clock skew detected on mon.f, mon.o, mon.p, mon.qmon.f clock skew 0.243128s > max 0.05s (latency 0.000836159s)mon.o clock skew 16.249s > max 0.05s (latency 0<...

编程日记 2025/9/18 13:47:51

Web开发技术概述

Web开发技术涵盖了前端和后端开发，以及数据库技术。前端开发包括使用HTML、CSS、JavaScript等原生技术，以及jQuery、Bootstrap、AngularJS、React、Vue等框架。后端开发则涉及ASP.NET、PHP、Python Web（Flask、Django）、Java Web&…...

编程日记 2025/9/17 18:09:32

级联选择器多选动态加载

一.级联展示注：因为级联选择器这里是动态加载，因此如果上来选中一级就需要加载出后面三级的全部数据，依然会很卡，因此，和产品协商把一二级多选框去掉了，这样也避免了你选择一级不能实现子级被全部选中的问…...

编程日记 2025/9/18 12:27:46

三、数据治理应用开发整体架构

1.数据治理应用开发整体架构概览该架构图描绘了一个全面的数据治理应用开发平台，旨在为用户提供从数据调研、治理构建、资产管理到应用开发、运维监控等全生命周期的一体化服务。整体架构呈现出模块化、松耦合的特点，并强调低代码开发和业务中台能力。 …...

编程日记 2025/9/19 19:52:10

【附带脚本】解决notion加载慢问题

问题原因 notion网站的服务器在国外，因为网络问题（国际出口带宽限制）导致访问速度较慢和域名解析延迟等问题。解决方案通过在 hosts 文件中直接指定一个更快的 IP 地址（例如国内镜像服务器），可以显著提…...

编程日记 2025/9/17 18:09:26

图片上传 html demo

相关文章：