react+input模仿antd- upload组件上传excel文件

文章由来

这段时间一直在做react+antd的项目，遇到一个需求是要上传excel文件，看了antd的官方文档，里面有upload的组件，但是里面几乎都是上传图片，也罢，想到可以用原生input去仿照它的样式写啊，于是开整。

代码步骤

1. 仿照upload样式写一个上传按钮。
2. 将input的type=file，然后设置样式将input框隐藏，这样在点击按钮的时候实际是触发了input点击文件上传的效果。
3. 将选择上传的文件的名字获取到，赋值在div标签中。代码如下

• 【特别注意】在运行过程中出现了一个小坑，因为input是写的onchange事件，所以当上传文件没有改变时，文件将获取不到，解决该问题的方法是在input点击时就将value值置空 onClick={(e) => {e.target.value = null}}

//js
 const [fileName, setFileName] = useState();
 const [files, setFiles] = useState({});
 const changeUrl = (e) => {
    const file = e.target.files && e.target.files[0];
    setFiles(file);
    setFileName(file.name);
  };
//jsx
<Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    onFinish={fileUpload}
    autoComplete="off">
    <Form.Item label="上传文件" valuePropName="fileList">
         <Button type="primary" icon={<UploadOutlined/>}>选择文件</Button>
         <input className="hidInp" type="file" accept=".xlsx,.xls" 
             onClick={(e) => {e.target.value = null}}
             onChange={changeUrl} />
         <div>{fileName}</div>
    </Form.Item>
    <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
         <Button type="info" onClick={() => { 
            setFileVisible(false)
            setFileName('')
            setFiles({})
        }} style={{ marginRight: '10px' }}>取消</Button>
        <Button type="primary" htmlType="submit">提交</Button>
     </Form.Item>
 </Form>
 //css
 .hidInp {
  position: absolute;
  left: -77px;
  top: 0;
  opacity: 0;
  cursor: pointer;
}