【Ant-Desgin 头像上传框】限制数量为1张图片,base64,其他需求可以改我组件中的代码

Ant-Desgin 头像上传框

  • 样式图
  • 参数
  • 主要代码
    • UpLoad 组件
    • 父组件

样式图

在这里插入图片描述
在这里插入图片描述

图片数量限制为1,当选择了图片后,需要切换图像时需点击头像完成切换

参数

/*** @description: 图片上传组件* @param {*} action: 上传地址* @param {*} width: 宽度* @param {*} height: 高度* @param {*} onFileListChange: 文件列表改变的回调函数* @return {*}*/
<FileUpload action={"/upload"} width={100} height={100} onFileListChange={handleFileListChange} />

主要代码

UpLoad 组件

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-unused-vars */
import React, { useEffect, useState, useRef } from 'react'
import { Upload, message } from 'antd'
import PropTypes from 'prop-types'
import ImgCrop from 'antd-img-crop'const FileUpload = ({ action, width = 100, height = 100, onFileListChange }) => {const [fileList, setFileList] = useState([])const [imgUrl, setImgUrl] = useState('')const uploadRef = useRef(null)const imgStyle = {width: `${width}px`,height: `${height}px`,objectFit: 'cover',borderRadius: '50%',cursor: 'pointer'}useEffect(() => {}, [])FileUpload.propTypes = {action: PropTypes.string.isRequired,width: PropTypes.number,height: PropTypes.number,onFileListChange: PropTypes.func}const onChange = async ({ fileList: newFileList }) => {const src = await new Promise(resolve => {const reader = new FileReader()reader.readAsDataURL(newFileList[0].originFileObj)reader.onload = () => resolve(reader.result)})setImgUrl(src)setFileList(newFileList)// 调用父组件传递的回调函数onFileListChange(newFileList)}const onPreview = async file => {const src = await new Promise(resolve => {const reader = new FileReader()reader.readAsDataURL(file.originFileObj)reader.onload = () => resolve(reader.result)})const image = new Image()image.src = srcconst imgWindow = window.open(src)imgWindow?.document.write(image.outerHTML)}const beforeUpload = async file => {console.log('beforeUpload')const isLt12M = file.size / 1024 / 1024 < 12const isImage = file.type.startsWith('image/')if (!isLt12M) {message.error('图片不得大于12MB!')}if (!isImage) {message.error('只允许上传图片!')}return isLt12M && isImage}const handleImageClick = () => {const uploadInput = document.querySelector('.ant-upload input[type="file"]')if (uploadInput) {uploadInput.click()}}return (<><ImgCrop><Uploadaction={action}ref={uploadRef}listType="picture-circle"fileList={fileList}onChange={onChange}onPreview={onPreview}beforeUpload={beforeUpload}showUploadList={false}maxCount={1}>{fileList.length < 1 && '+ Upload'}</Upload></ImgCrop>{fileList.length > 0 && (<div><img src={imgUrl} alt="avatar" style={imgStyle} onClick={handleImageClick} /></div>)}</>)
}export default FileUpload

父组件

/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from 'react'
import FileUpload from '.'const Demo = () => {const [parentFileList, setParentFileList] = useState([])const handleFileListChange = (newFileList) => {// 更新父组件的文件列表setParentFileList(newFileList)}useEffect(() => {console.log(parentFileList, 666);}, [parentFileList, setParentFileList])return (<div><FileUpload action={"/upload"} width={100} height={100} onFileListChange={handleFileListChange} /></div>)
}export default Demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/316045.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flink Unsupported operand types: IF(boolean, NULL, String)

问题&#xff1a;业务方存储了NULL 字符串&#xff0c;需要处理为 null select if(anull&#xff0c;null&#xff0c;a); 结果遇到了 Unsupported operand types: IF(boolean, NULL, String)&#xff0c;根据报错反馈&#xff0c;很明显应该是没有对 null 自动转换&#xff…

应用层协议 -- HTTPS 协议

目录 一、了解 HTTPS 协议 1、升级版的 HTTP 协议 2、理解“加密” 二、对称加密 1、理解对称加密 2、对称加密存在的问题 三、非对称加密 1、理解非对称加密 2、中间人攻击 3、CA 证书和数字签名 四、总结 一、了解 HTTPS 协议 1、升级版的 HTTP 协议 HTTPS 也是…

untiy avpro播放超过8K视频的解决方案

安转LAV Filters解码器&#xff0c;然后指定Avpro使用这个解码器播放即可 第一步 安装解码器 下载链接 第二步 AVPro设置 MediaPlayer脚本中一共两处

jasypt组件死锁bug案例分享

事故描述 1、上午9.55发布了一个Apollo动态配置参数&#xff1b; 2、片刻后&#xff0c;服务器接口开始出现大量的超时告警&#xff0c;似乎是某资源被耗尽不足分配&#xff1b; 3、正值业务请求高峰的上午十点&#xff08;平台上午10点会有一些活动会拉一波用户流量&#x…

深入docker-swarm overlay网络模型

目录 1.简介 2.网络模型 3.docker_gwbridge网络 3.1.docker_gwbridge网关地址 3.2.检查docker_gwbridge网络 3.2.1.查找任务容器eth接口 3.2.2.查找ingress-sbox容器eth接口 4.检查ingress网络 4.1.检查ingress网络 4.2.检查ingress网络的命名空间 4.2.1.查找任务容…

VBA技术资料MF147:从Excel运行PowerPoint演示文稿

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

12 Junit单元测试、反射、注解

单元测试 介绍 Junit单元测试是做什么的&#xff1f; 就是针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试。 Junit单元测试框架 可以用来对方法进行测试&#xff0c;它是由Junit公司开源出来的 Junit单元测试的优点是什么&#xff1f; 可以灵活的…

深度学习中的子空间、线性变换和矩阵概念应用

1.表示子空间 在深度学习中&#xff0c;“不同的表示子空间”通常是指模型通过不同的参数&#xff08;例如权重矩阵&#xff09;将输入数据映射到不同的高维空间&#xff0c;这些空间被称为表示子空间。每个子空间都能够捕获输入数据中不同的特征或模式。以下是一些详细解释&am…

Spring Boot 中Mybatis使用Like的使用方式和注意点

说明 模糊查询在项目中还是经常使用的&#xff0c;本文就简单整理Mybatis中使用Like进行模糊查询的几种写法以及一些常见的问题。 使用Springboot简单配置一下Mybatis&#xff0c;然后进行说明。Springboot集成Mybatis这里就不做介绍了&#xff0c;这里我们主要介绍一下在mybat…

VS Code开发STM32F4xx jlink接口swd模式

VS Code开发STM32F4xx jlink接口swd模式(测试OK) 下面的代码(已验证),只作为参考,不同情况的更改参照文章末尾链接 c_cpp_properties.json代码 (其中include路径和宏定义可以参照makefile添加) : {"configurations": [{"name"…

第三节课,后端登录【1】.1--本人

一、后端登录逻辑&#xff0c;检测账户密码是否合法及密码输入是否正确 视频链接&#xff1a; 网址&#xff1a; 第三节&#xff1a;【视频】后端登录逻辑&#xff0c;检测账户密码是否合法及密码输入是否正确视频链接&#xff1a;-CSDN博客 从5.1开始 这是一个Java方法&am…

Swift - 基础语法

文章目录 Swift - 基础语法1. 常量1.1 只能赋值1次1.2 它的值不要求在编译时期确定&#xff0c;但使用之前必须赋值1次1.3 常量、变量在初始化之前&#xff0c;都不能使用 2. 标识符3. 常用数据类型4. 字面量4.1 布尔4.2 字符串4.3 整数4.4 浮点数4.5 数组4.6 字典 5. 类型转换…

【华为】VRRP的实验配置

【华为】VRRP的实验配置 实验需求拓扑LSW 3LSW 1基础配置VRRPDHCPOSPF默认路由 LSW 2基本配置VRRPDHCPOSPF默认路由 R1ISPPC1PC2 测试上网VRRP实验需求监视端口 配置文档 实验需求 ① 该公司有市场部和技术部&#xff0c;分别划在VLAN 10 和 VLAN 20里面 ② 此时为了网络的稳…

Eclipse内存分析器 Java内存分析工具MAT(Memory Analyzer Tool)的介绍与使用

1.visualvm实时监测 2.Memory Analyzer Tool打开 3.工具的使用可以参考 Java内存分析工具MAT(Memory Analyzer Tool)的介绍与使用 ------------------------ 1.我远程发现是其中一个客户端A请求服务器页面响应&#xff0c;一直得不到响应&#xff0c;然后客户端A一直请求&am…

20232801 2023-2024-2 《网络攻防实践》实践八报告

20232801 2023-2024-2 《网络攻防实践》实践八报告 1.实践内容 1.动手实践任务: 对提供的rada恶意代码样本&#xff0c;进行文件类型识别&#xff0c;脱壳与字符串提取&#xff0c;以获得rada恶意代码的编写作者. 2.动手实践任务二&#xff1a;分析Crackme程序 在WinXP Attac…

【可下载】CDA 1级教材《精益业务数据分析》2023最新版

十年磨一剑&#xff0c;今日把书展&#xff01; 作为国内率先成立的专注于数据科学领域的专业研究团队&#xff0c;CDA数据科学研究院组织多名行业知名专家&#xff0c;在对近十年的教学和研究成果进行凝练&#xff0c;并紧密结合各行业领军企业的实际业务数据分析需求和案例后…

手写SpringMVC开发框架

运行环境 JDK &#xff1a;17 IntelliJ IDEA &#xff1a; 2022.3 Tomcat&#xff1a;8.5.86 前期工作 先创建一个新的Maven项目&#xff0c;按照图示操作&#xff1a; 在这里我们选择Maven Archetype选项&#xff0c;写好项目名称&#xff1a;Handwriting-SpringMVC&#xff…

某知乎APP - X-Zse-96

⚠️前言⚠️ 本文仅用于学术交流。 学习探讨逆向知识&#xff0c;欢迎私信共享学习心得。 如有侵权&#xff0c;联系博主删除。 请勿商用&#xff0c;否则后果自负。 接口网址 app 版本: 8.10.0 aHR0cHM6Ly93d3cuemhpaHUuY29tL2FwaS92NC9zZWFyY2hfdjM 加密位置分析 > …

EOCRDS1T-05S反时限过电流保护继电器 施耐德韩国三和

三和EOCR株式会社是韩国zui大的电动机保护器生产企业&#xff0c;公司由金仁锡博士&#xff08;施耐德电气集团韩国*执行官&#xff09;于1981年建立。 2001年&#xff0c;为了把企业发展成性的、战略性企业&#xff0c;随后加入了法国施耐德电气集团公司。 EOCR主要产品有电…

YOLO新鲜腐烂水果检测数据集:8类,11000多张图像,标注完整

YOLO新鲜腐烂水果检测数据集&#xff1a;8类&#xff0c;11000多张图像&#xff0c;yolo标注完整&#xff0c;包含烂苹果&#xff0c;烂香蕉&#xff0c;烂橙子&#xff0c;烂石榴&#xff0c;好苹果&#xff0c;好香蕉&#xff0c;好橙子&#xff0c;好石榴8个类别 图像统一分…