前端手写文件上传;使用input实现文件拖动上传
使用input实现文件拖动上传

vue2代码:
<template><div><div class="drop-area" @dragenter="highlight" @dragover="highlight" @dragleave="unhighlight" @drop="handleDrop"@click="handleClick">将文件拖拽到此处或者点击上传<input type="file" ref="fileInput" accept=".png,.jpg,.jpeg,.pdf" @change="handleFiles" multiple style="display: none;"></div><ul v-if="fileList.length"><li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li></ul><pre>{{ fileList }}</pre></div>
</template><script>
export default {data() {return {fileList: []};},methods: {highlight(e) {e.preventDefault();e.stopPropagation();e.target.classList.add('hover');},unhighlight(e) {e.target.classList.remove('hover');},handleDrop(e) {e.preventDefault();e.stopPropagation();this.unhighlight(e);const files = e.dataTransfer.files;console.log('拖拽得到List', e);// this.handleFiles(files);for (let i = 0; i < files.length; i++) {this.fileList.push({...files[i],name: files[i].name,size: files[i].size,type: files[i].type});}this.uploadFile()},handleClick() {this.$refs.fileInput.click();},handleFiles(e) {console.log(11, e);const files = e.target.files || e;for (let i = 0; i < files.length; i++) {this.fileList.push({...files[i],name: files[i].name,size: files[i].size,type: files[i].type});}this.uploadFile()},// 上传文件uploadFile() {console.log('this.fileList', this.fileList);}}
};
</script><style>
.drop-area {width: 300px;height: 200px;border: 2px dashed #ccc;border-radius: 10px;text-align: center;line-height: 200px;cursor: pointer;
}.drop-area.hover {border-color: #11716f;
}.drop-area:hover {border-color: #11716f;
}
</style>
vue3代码:
<template><div><div class="drop-area" @dragenter="highlight" @dragover="highlight" @dragleave="unhighlight" @drop="handleDrop"@click="handleClick">将文件拖拽到此处或者点击上传<input type="file" ref="fileInput" accept=".png,.jpg,.jpeg,.pdf" @change="handleFiles" multiple style="display: none;"></div><ul v-if="fileList.length"><li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li></ul><pre>{{ fileList }}</pre></div>
</template><script>
import { ref } from 'vue';export default {setup() {const fileList = ref([]);const fileInput = ref(null);const highlight = (e) => {e.preventDefault();e.stopPropagation();e.target.classList.add('hover');};const unhighlight = (e) => {e.target.classList.remove('hover');};const handleDrop = (e) => {e.preventDefault();e.stopPropagation();unhighlight(e);const files = e.dataTransfer.files;for (let i = 0; i < files.length; i++) {fileList.value.push({...files[i],name: files[i].name,size: files[i].size,type: files[i].type});}uploadFile();};const handleClick = () => {console.log(fileInput.value);fileInput.value.click(); // 使用 ref 的 value 直接访问 DOM 元素};const handleFiles = (e) => {const files = e.target.files || e;for (let i = 0; i < files.length; i++) {fileList.value.push({...files[i],name: files[i].name,size: files[i].size,type: files[i].type});}uploadFile();};// 上传文件const uploadFile = () => {console.log('fileList', fileList.value);};return {fileList,highlight,unhighlight,handleDrop,handleClick,handleFiles,fileInput};}
};
</script><style>
.drop-area {width: 440px;height: 185px;border: 1px dashed #dcdfe6;border-radius: 6px;text-align: center;line-height: 185px;cursor: pointer;
}.drop-area.hover {border-color: #11716f;
}.drop-area:hover {border-color: #11716f;
}
</style>相关文章:
前端手写文件上传;使用input实现文件拖动上传
使用input实现文件拖动上传 vue2代码: <template><div><div class"drop-area" dragenter"highlight" dragover"highlight" dragleave"unhighlight" drop"handleDrop"click"handleClick&quo…...
Flutter 中的 PhysicalModel 小部件:全面指南
Flutter 中的 PhysicalModel 小部件:全面指南 Flutter 的 PhysicalModel 小部件提供了一种简单而高效的方式来给应用添加物理效果,如阴影和层次感。它本质上是一个矩形的 Container,带有圆角边框和可选的阴影,能够模仿真实世界中…...
Flutter 中的 Center 小部件:全面指南
Flutter 中的 Center 小部件:全面指南 在Flutter的世界里,Center是一个简单而强大的布局小部件,它能够将子组件放置在父组件的中心位置。无论是水平中心、垂直中心,还是两者都居中,Center都能轻松实现。本文将详细介绍…...
windows 执行node报错 800A1391
在项目下执行node -v的时候,抛了这个错误,一开始没发现有啥问题 现在一看,这个报错里的node怎么是个文件... 出现这个问题,是因为项目下,有个同名的文件叫node.js,搞得windows一时不知道是想打开node.js文…...
无人机操作界面来了,起点就很高呀。
无人机操作界面设计需要考虑以下几个方面: 易用性:无人机操作界面应该简单直观,易于操作和理解。操作按钮和控键应该布局合理,易于触摸或点击。重要的操作功能应该易于找到和使用,避免用户迷失或困惑。实时反馈&#…...
Android 11 AudioPolicyService 启动流程
AudioPolicyService在init进程中启动,源码路径:frameworks/av/media/audioserver/audioserver.rc service audioserver /system/bin/audioserverclass coreuser audioserver# media gid needed for /dev/fm (radio) and for /data/misc/media (tee)grou…...
java中static关键字面试五连问
抽象(abstract)方法是否可同时是静态的(static)? 抽象方法本来将来就是要被重写的,而静态方法不能被重写,所以是错误的 是否可以从一个静态(static)方法内部发出对非静态方法的调…...
基于文本来推荐相似酒店
基于文本来推荐相似酒店 查看数据集基本信息 import pandas as pd import numpy as np from nltk.corpus import stopwords from sklearn.metrics.pairwise import linear_kernel from sklearn.feature_extraction.text import CountVectorizer from sklearn.feature_extrac…...
红队内网攻防渗透:内网渗透之前置知识外网权限提升技术
红队内网攻防渗透 1. 内网权限提升技术1.1 外网权限提升的思路-前置知识1.1.1 外网权限提升知识点:1.1.2 外网权限提升基础内容1.1.2.1 为什么我们要学习权限提升转移技术:1.1.2.2 具体有哪些权限需要我们了解掌握的:1.1.2.3 以上常见权限获取方法简要归类说明:1.1.2.4 以上…...
【漏洞复现】大华智能物联综合管理平台 log4j远程代码执行漏洞
0x01 产品简介 大华ICC智能物联综合管理平台对技术组件进行模块化和松耦合,将解决方案分层分级,提高面向智慧物联的数据接入与生态合作能力。 0x02 漏洞概述 大华ICC智能物联综合管理平台/evo-apigw/evo-brm/1.2.0/user/is-exist 接口处存在 l0g4i远程…...
OrangePi AIpro测评
文章目录 1、外观部分2、系统初探3、AI性能体验4、总结 首先非常感谢csdn以及香橙派能够提供这样一个平台,可以测试OrangePi AIpro这样一块开发板,这块板子给我的感觉还是非常不错的,非常适合用来作为嵌入式学习的板子,性能也达到…...
写代码之前一定要提前想好思路
就和写数学题目一样,在做题目之前要先把思路确立下来。可能是我早年做数学的时候老是着急做题目没怎么分析过题目,把这个习惯不自觉地代入了代码的写入当中。习惯的养成使得我即使明白了自己的问题也依然会不断的犯错,看来只有刻意地提醒自己…...
「清新题精讲」Skiers
更好的阅读体验 Skiers Description 给定 n n n 个点的有向无环平面图,求最少多少条从 1 1 1 到 n n n 的路径能覆盖原图的所有边? 1 ≤ n ≤ 5 1 0 3 1\le n\le 5\times10^3 1≤n≤5103 Solution 考虑从 1 1 1 到 n n n 的路径其实是边的链覆…...
Transformer详解(8)-基于transformer的英文到中文翻译模型
1、数据使用TED,数据清洗 WIT是“转录和翻译演讲网络清单”的缩写,是 TED 演讲多语言转录的现成版本,可用于研究目的。 2、英文中文翻译模型搭建 3、模型训练 4、模型推理...
算法的时间复杂度(详解)
前言: 算法(Algorithm):就是定义良好的计算过程,他取一个或一组的值为输入,并产生出一个或一组值作为 输出。简单来说算法就是一系列的计算步骤,用来将输入数据转化成输出结果 一、算法效率 1.1 如何衡量一个算法的好坏 如何衡…...
Flutter 中的 NestedScrollViewViewport 小部件:全面指南
Flutter 中的 NestedScrollViewViewport 小部件:全面指南 Flutter 是一个功能丰富的 UI 工具集,它提供了多种布局和控件来帮助开发者构建美观且功能强大的应用。在 Flutter 的滚动控件中,NestedScrollView 是一个特别的存在,它允…...
断开自定义模块与自定义库的链接
断开自定义模块与自定义库的链接 1、断开模块与库的链接 1、断开模块与库的链接 如果摸个库文件添加到模型中,无法“Disable Link”时,可以使用save_system命令进行断开到模型中用户定义的库模块的链接; 参考链接: 传送门 save…...
粉丝问,有没有UI的统计页面,安排!
移动应用的数据统计页面具有以下几个重要作用: 监控业务指标:数据统计页面可以帮助用户监控关键业务指标和数据,例如用户活跃度、销售额、转化率等。通过实时更新和可视化呈现数据,用户可以及时了解业务的整体状况和趋势。分析用…...
Nginx R31 doc-17-debugging 调试
前言 大家好,我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的,可以参考我的另一个项目: 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …...
python -【一】基础语法
python 基础语法 一. 基础数据类型 常用的 6 种数据类型 类型描述说明数字(Number)int,float,complex(复数),bool复数:4 3j,j 表示复数字符串(String)文本࿱…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
Python 高效图像帧提取与视频编码:实战指南
Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
