1、react文件上传可以使用 input[type=file]来实现。
1)在.tsx页面编写如下代码。
<div className={'box'}>
<input className={'btn'} type={'button'} value={'上传文件'} />
<div className={'text'}>{fileName}</div>
<input className="fileinp" type="file" accept=".xlsx,.xls" onChange={changeUrl} />
</div>
const changeUrl = async (e: any) => {
const file = e.target.files && e.target.files[0];
setFileUrl(file);
};
2)在.less页面编写如下代码。
.box {
position: relative;
overflow: hidden;
.btn {
color: #1492ff;
background: #ffffff;
border-radius: 4px;
padding: 4px 12px;
border: 1px solid #1492ff;
line-height: 20px;
}
.text {
padding-top: 5px;
padding-left: 5px;
cursor: default;
}
.fileinp {
position: absolute;
left: -77px;
top: 0;
opacity: 0;
cursor: pointer;
}
}