react文件上传

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;
    }
  }