React+ts 封装antd拖拽上传组件

最新推荐文章于 2023-05-20 09:48:19 发布
最新推荐文章于 2023-05-20 09:48:19 发布
阅读量924 收藏 6
点赞数 3
分类专栏： React 文章标签： react.js typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46831501/article/details/124704595
版权

基于react+typescript封装了一个仿antd拖拽上传的组件，整个组件使用函数式组件编写，使用hooks进行封装，利用拖拽放置事件处理逻辑，后台上传服务器使用koa简单写了个接口来上传，接下来上代码。

首先定义传入的props类型以及单个上传文件的类型
在这里插入图片描述

定义拖拽进入、停留、离开、放置事件，这些事件都需要阻止默认事件和冒泡事件，比较简单就不多说了，主要是放置事件 onDragDrop ，主要的上传逻辑都在这里，upload 函数一会再来说。
在这里插入图片描述
上传的处理逻辑
在这里插入图片描述

通过useEffect在组件挂载完成后将事件添加给dom实例，记得在组件销毁的时候移除这些事件。
在这里插入图片描述

dom结构如下图
在这里插入图片描述
使用方式
在这里插入图片描述
组件效果
在这里插入图片描述
后台主要逻辑
在这里插入图片描述
最终使用效果：
在这里插入图片描述

Tara___
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文件上传组件封装，支持多文件上传和拖拽上传
06-07
该组件请放在react项目中运行，且需要npm install axios spark-MD5 antd
react实现单击或者拖动文件上传
wl_sqfn的博客
08-08 1892
react实现单击或者拖动文件上传
react+TS使用antd Upload组件自定义上传
YX0711的博客
05-20 974
react+ts使用antd自定义上传文件
「React Hooks」如何用120行代码，实现一个交互良好的拖拽上传组件
前端劝退师
09-03 1666
前言 你将在该篇学到： 如何将现有组件改写为 React Hooks函数组件 useState、useEffect、useRef是如何替代原生命周期和Ref的。 一个完整拖拽上传行为覆盖的四个事件：dragover、dragenter、drop、dragleave 如何使用React Hooks编写自己的UI组件库。 逛国外社区时看到这篇： How To Implement Drag an...
react-reactdropzoneReactjs用于文件上传的简单HTML5拖放区域
08-15
react-dropzone - React.js用于文件上传的简单HTML5拖放区域
react 拖拽上传
weixin_30492047的博客
10-24 924
最近项目要求一个拖拽上传图片的功能，项目要求的时间也比较紧，本着不重复造车轮以及没时间去从零开发的原则，在谷歌中搜索的一些文档，果然发现了一个开源的拖拽组件，react-dropzone，这个react拖拽组件，官方文档描述的很详细，可以根据自己的需求进行封装。 安装 react-dropzone npm install --save react-dropzone 引入到项目 i...
从零实现ReactHooks拖拽上传组件+Koa2服务端接口
azl397985856的专栏
11-06 258
你与前端大佬之间，或许只差一个高级组件库的距离！在公司里，前端主管最常见的工作就是搭建项目架构，编写最适合公司业务的组件库，所以能否编写出高质量的组件库，是你能否在公司里...
react-drop-to-upload:一个简单的React组件，用于“拖放到上载”功能
04-30
用于ReactHTML5拖放上传组件 一个简单的React组件，用于“拖放到上传”功能。 删除的文件将作为 ， ArrayBuffer和数据URI返回。 它支持Internet Explorer 10及更高版本，以及所有主要的桌面浏览器。 您还可以在以下位置查看最新的浏览器兼容性： 。 为什么要使用另一个文件删除组件？ 大多数文件删除组件都是综合性和限制性的。 他们进行所有繁重的工作，包括文件删除和HTTP POST上传。 他们都有良好的意愿。 但是为了确保一切正常，开发人员可能需要遵循他们的工作方式，包括添加特定的服务器代码。 我们采用微服务，并专注于制作出色，小巧且易于学习的UI组件。 我们认为React组件不应跨越可视化边界并接触任何运输代码。 因此，出于一些充分的理由，我们有意将HTTP POST上传部分保留在远离组件的位置。 选择您的交通工具。 XMLHttpRequ
组件传值动态
SilentLand的博客
11-30 551
组件父子传值 单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件 需求： 1.在子组件中修改msg 2.子组件中修改之后不会影响到父组件 3.父组件中修改之后会影响到子组件 解决方案 将msg保存期起来，改变保存的那个属性，这样需求1和需求2就完成了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
1-2.antd换肤（Layout组件未封装） 使用插件实现扩展antd样式文件并绑定cssVariable，通过less.js浏览器在线编译更改更少变量方法实现主题样式更改 @import " _var " ; :root { --primary-color : @primary-color ;...
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。本项目提供思路等
typescript-file-uploader：TypeScript，带有文件上传器组件的React实现。 演示可在https：youtu.bege9IOvJVKWE获得
02-15
运行项目的步骤 要在本地运行该项目，请将此项目克隆到您的计算机上，并使用命令行在项目目录中运行以下命令。 yarn install yarn start 以开发模式运行该应用程序。 打开在浏览器中查看。 部署版本 访问此链接 什么是FileUploader？ <FileUploader>是可重用和可自定义的文件上载和放置区组件API。 该组件的实现是使用React TypeScript编写的。 以下是可以传递给组件的可选道具。 interface FileUploaderProps { dragDropText ?: string ; dragDropImage ?: string ; previewTextLabel ?: string ; showCompressionRate ?: boolean ; compressionTextLabel ?: st
react-fileupload:react版本的图片上传，支持拖拽和删除，用来复习Drag，Drop，File，XHR2
04-29
react-fileupload react版本的图片上传，功能有选择，拖拽，删除，预览 技术 File Drag & Drop XHR2 Fetch URL & FileReader 链接
react+ts+antd cron表达式组件
最新发布
11-16
reac+ts+antd 实现的一个cron表达式组件 该组件具备基础的秒、分、时、日、月、周、年获取cron的功能。
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
NodeJS全栈开发之前端基于 React全家桶+TypeScript+Antd 构建用户界面，功能包括：登录，注册，找回密码，自动登录，登出，错误页面，todoList增删改查CRUD。
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
2022升级 React18+TS高仿AntD从零到一打造组件库课程
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
如何用120行代码，实现一个交互完整的拖拽上传组件？
前端劝退师
08-29 169
前言你将在该篇学到：如何将现有组件改写为 React Hooks函数组件useState、useEffect、useRef是如何替代原生命周期和Ref的。一个完整拖拽上传...
react 拷贝上传文件
waillyer的博客
10-22 367
关键部分 const haoroomsbox = document.getElementById('ant-upload-drag-area-id'); haoroomsbox.addEventListener('paste', event => { const data = event.clipboardData || window.clipboardData; const items = data.items;
react + vite +ts 中封装svgicon组件
07-13
在 React + Vite + TypeScript 中封装 SVGIcon 组件可以按照以下步骤进行： 1. 创建一个新的组件文件，可以命名为 `SVGIcon.tsx`。 2. 引入 React 和 SVGIcon 的依赖： ```tsx import React from 'react'; import { ReactComponent as MyIcon } from './path/to/your/icon.svg'; ``` 3. 定义 `SVGIconProps` 类型，用于传递属性给 SVGIcon 组件： ```tsx type SVGIconProps = { width?: number; height?: number; color?: string; } ``` 4. 创建 SVGIcon 组件，使用 `SVGIconProps` 类型来接收 props： ```tsx const SVGIcon: React.FC<SVGIconProps> = ({ width, height, color }) => { return ( <MyIcon width={width} height={height} fill={color} /> ); } ``` 5. 导出 SVGIcon 组件： ```tsx export default SVGIcon; ``` 6. 在其他组件中使用封装好的 SVGIcon 组件，传递相应的属性： ```tsx import React from 'react'; import SVGIcon from './path/to/SVGIcon'; const App: React.FC = () => { return ( <div> <SVGIcon width={24} height={24} color="red" /> </div> ); } export default App; ``` 这样就完成了 React + Vite + TypeScript 中封装 SVGIcon 组件的过程。你可以根据自己的需要在 SVGIcon 组件中添加更多的属性或功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值