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

图片粘贴上传实现

article 2026/4/14 20:41:38

图片上传 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"…...

编程日记 2026/2/18 21:48:00

【Linux常用命令-不断更新】

在 Linux 系统中，查看总剩余内存常用方法。方法 1：使用 free 命令 free 是一个常用的命令，用于显示系统的总内存、已用内存、空闲内存和交换内存。 free -h-h 参数表示以易读的格式（如 GB、MB）显示内存信息。输出示…...

编程日记 2026/2/17 3:51:58

轻松搭建本地大语言模型（一）Ollama安装与使用

Ollama 是一款开源的本地大语言模型运行框架，支持在 Windows、macOS 和 Linux 系统上运行，能够帮助用户轻松下载和使用各种大语言模型（例如deepseek、llama、qwen）。本文将详细介绍 Ollama 的安装步骤，帮助你快速搭建本…...

编程日记 2026/4/12 7:29:58

Conda 常用命令全解析

在 Windows 系统中，Conda 是一款功能强大的包管理和环境管理工具，尤其对于数据分析、科学计算等场景有着重要的作用。本文将详细介绍 Conda 在 Windows 系统中的常用命令，帮助你高效地管理虚拟环境和软件包。一、环境管理命令 1.1 查看 Co…...

编程日记 2026/4/12 17:56:21

【核心算法篇十五】《深度解析DeepSeek遗传算法：让超参数调优从“玄学”变“科学”的终极指南》

引言：超参数调优的“炼丹困局”与破局之路在机器学习的世界里，调参工程师常被戏称为"炼丹师"——面对动辄几十个超参数的复杂模型，我们就像古代术士守着炼丹炉，不断尝试各种参数组合，期待偶然炼出"仙丹"。传统网格搜索（Grid Search）需要遍历所有可…...

编程日记 2025/8/5 6:20:24

kafka消费能力压测：使用官方工具

背景在之前的业务场景中，我们发现Kafka的实际消费能力远低于预期。尽管我们使用了kafka-go组件并进行了相关测试，测试情况见《kafka-go:性能测试》这篇文章。但并未能准确找出消费能力低下的原因。我们曾怀疑这可能是由我的电脑网络带宽问题或Kafka部…...

编程日记 2026/4/6 23:48:20

[STM32 - 野火] - - - 固件库学习笔记 - - - 十六.在SRAM中调试代码

一、简介在RAM中调试代码是一种常见的嵌入式开发技术，尤其适用于STM32等微控制器。它的核心思想是将程序代码和数据加载到微控制器的内部RAM（SRAM）中运行，而不是运行在Flash存储器中。这种方法在开发过程中具有显著的优势&#…...

编程日记 2026/4/8 15:10:30

雷军推荐：WPS 与 Pastemate 联用，效率飞升新高度

在当今快节奏的工作与学习环境中，效率提升成为了每个人都在追求的目标。而雷军，这位科技界的领军人物，凭借其敏锐的洞察力，为我们推荐了一组强大的工具组合 ——WPS 与 Pastemate，它们携手合作，能够为我们的…...

编程日记 2026/4/12 13:34:38

css主题色修改后会多出一个css吗？css怎么定义变量？

在 CSS 中修改主题色时，通常不会直接生成一个新的 CSS 文件，而是通过 CSS 变量（Custom Properties） 或预处理器变量（如 Sass、Less） 来动态修改样式。以下是详细说明： 1. CSS 变量（…...

编程日记 2025/8/9 3:04:21

下载对应的包 elasticsearch-8.1.1-linux-x86_64.tar.gz 创建es租户 groupadd elasticsearc useradd elasticsearch -g elasticsearch -p elasticsearch chmod uw /etc/sudoers chmod -R elasticsearch:elasticsearch elasticsearch 修改配置文件 vim /etc/sysctl.conf vm…...

编程日记 2025/12/28 6:40:25

轴承故障特征—SHAP 模型 3D 可视化

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理基于FFT CNN - BiGRU-Attention 时域、频域特征注意力融合的轴承故障识别模型-CSDN博客基于FFT CNN - Transformer 时域、频域特征融合的轴承故障识别模型-CSDN博客 P…...

编程日记 2026/4/11 19:33:34

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

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

编程日记 2026/4/14 6:00:18

智能选路＋NAT实验

1.实验拓扑： 二.实验配置 1、防火墙ip配置和信任区域配置： 2.导入地址库：先下载模板--->进入模板修改地址信息--->导入地址： 3配置链路接口： 4.配置真实DNS服务器信息 5.创建虚拟服务，虚拟DNS服务…...

编程日记 2026/4/7 19:39:27

电商API接口数据与市场趋势分析的深度融合

一、电商API接口数据的价值电商API接口是连接电商平台与外部系统（如数据分析工具、ERP系统等）的桥梁。通过API接口，企业可以获取海量的交易数据、用户行为数据、商品信息等。这些数据具有以下价值： 数据实时性：API接…...

编程日记 2026/4/6 12:11:22

SMOJ 种植玉米/铺地砖题解

最近练了轮廓线dp的题目 1.种植玉米题意农夫有一个被划分成 m m m行 n n n列的农田。每个格子的数字如果是 1 1 1则表示该格子的土地是肥沃的，可以种植玉米；如果该格子的数字是 0 0 0则表示该格子不能种植玉米。但是还有一个条件：不…...

编程日记 2026/4/13 8:37:22

沃丰科技大模型标杆案例｜索尼大模型智能营销机器人建设实践

AI大模型发展日新月异，国内外主流大模型每月必会升级。海外AI大模型市场由美国主导， 各模型已形成“多强竞合”的局面。中国积极响应全球大模型技术的发展趋势，高校、研究院所等科研机构、互联网企业，人工智能企业均不同程度地投入…...

编程日记 2026/4/11 18:59:12

【pytest】编写自动化测试用例命名规范README

API_autoTest 项目介绍 1. pytest命名规范测试文件： 文件名需要以 test_ 开头或者以 _test.py 结尾。例如，test_login.py、user_management_test.py 这样的命名方式，pytest 能够自动识别并将其作为测试文件来执行其中的测试用例。测试类…...

编程日记 2026/2/20 17:41:28