自定义input上传图片组件

时间：2023-03-30 17:45:02 CSS

自定义input上传图片组件，美化样式前段时间由于项目需要，做了一个上传图片组件。在这里分享一下大概的思路，希望对有需要的人有所帮助~~~功能需求：1.限制上传图片的大小、分辨率、类型。2.上传图片支持自由裁剪。3.上传图片后支持预览和删除效果图。只截取了一小部分，大致看一下就ok了。是不是感觉好多了？原生的看起来好多了^_^项目是基于react框架写的，那我们开始编码吧~~~Step1：编写基本的html结构

{uploadButton}

//上传按钮组件代码如下：constuploadButton=(

上传照片

);Step2:基本样式输入文件{width:0.1px;高度：0.1px；不透明度：0；溢出：隐藏；位置：绝对；z-index:-1;}.ant-upload{@w:100px;宽度：@w；身高：@w；填充：5px；背景色：#fafafa；边框：1px虚线#d9d9d9；y：块；游标：指针；位置：相对；}.upload-plus-text{宽度：100%；文本对齐：居中；位置：绝对；左：0；顶部：50%；转换：翻译Y（-50%）；我{字体大小：28px;颜色：#999；}.ant-upload-text{margin-top:8px;字体大小：12px；颜色：#666；}}Step3：添加上传事件处理检测图片的类型、大小和分辨率{this.onFileChange(e);}}/>{uploadButton}

//一些常量定义constIMAGE_MIN_WIDTH=1280;//上传图片的最小宽度constIMAGE_MIN_HEIGHT=800;//上传图片的最小高度constIMAGE_MAX_SIZE=1024*1024;//上传图片的最大尺寸//处理上传文件onFileChange(e){constfile=e.target.files[0];e.target.value='';//再次上传同一个文件进行裁剪if(this.handleBeforeUpload(file)){constreader=newFileReader();reader.onload=e=>{constsrc=e.t目标结果；常量图像=新图像（）；const_this=这个；image.onload=()=>{constwidth=image.width;constheight=image.height;if(width>=IMAGE_MIN_WIDTH&&height>=IMAGE_MIN_HEIGHT){_this.setState({initialImageUrl:src,showCropModal:true});}else{message.error('照片分辨率小于1280*800');}};图片.src=src;};reader.readAsDataURL（文件）；}}//检查照片格式、大小等handleBeforeUpload(file){if(file){constsizeOk=file.size{this.onFileChange(e);}}/>{imageUrl?imagePreview:uploadButton}