文件上传功能使用input标签实现
将input标签的type写为file,
<input type="file">
原有的样式不好看可以选择使用css将input的display置为none;
通过自定义样式标签的事件触发input的点击事件。如在react或vue中使用ref即可;
<div className='content'>
<input
type="file"
name="file"
accept={accept}
style = {{display: 'none'}}
ref = { input => this.inputFile = input}
onChange={this.fileChange}
/>
<div className ='main'>
<div
className ='clickcontent'
onClick={this.clickFile}
>
<div className ='icontitlelayout'>
<InboxOutlined className ='icon' />
<span>点击上传文件</span>
</div>
</div>
<div className ='filename'>
<div className ='filenameDeleteLayout'>
<div>
{uploadFileName}
</div>
<div onClick={()=>this.deleteFile()}>
<DeleteOutlined className ='deleteicon'/>
</div>
</div>
</div>
</div>
</div>