自定义html图片上传,自定义input上传图片组件

自定义input上传图片组件,美化样式

前段时间因为项目需求，做过一个上传图片组件，这里分享下大致思路，希望对有需要的人有所帮助~~~

功能需求：1.上传图片限制大小、分辨率、类型

2.上传图片支持自由裁剪

3.图片上传后支持预览和删除

效果图，只截取了一小部分，大致看下就ok啦，是不是感觉比原生的好看多了^_^

项目是基于react框架写的，话不多说，开始撸代码~~~

Step1：编写基础html结构

type="file"

accept="image/jpeg, image/gif, image/png, image/bmp"

styleName="input-file"

/>

{uploadButton}

// uploadButton组件代码如下:

const uploadButton = (

上传照片

);

Step2：基础样式

input-file {

width: 0.1px;

height: 0.1px;

opacity: 0;

overflow: hidden;

position: absolute;

z-index: -1;

}

.ant-upload {

@w: 100px;

width: @w;

height: @w;

padding: 5px;

background-color: #fafafa;

border: 1px dashed #d9d9d9;

border-radius: 4px;

display: block;

cursor: pointer;

position: relative;

}

.upload-plus-text {

width: 100%;

text-align: center;

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

i {

font-size: 28px;

color: #999;

}

.ant-upload-text {

margin-top: 8px;

font-size: 12px;

color: #666;

}

}

Step3:添加事件处理

对上传图片的类型、大小和分辨率进行检测

type="file"

id='file'

accept="image/jpeg, image/gif, image/png, image/bmp"

styleName="input-file"

onChange={e => {

this.onFileChange(e);

}}

/>

{uploadButton}