前端通过input标签封装Upload组件实现文件上传

import React, { Component, Fragment, createRef } from 'react';
import './Upload.less';
type StateType = {
  [propName: string]: any;
};
interface changeFileType {
  (e: any): any;
}
type PropType = {
  accept: string; // 父级传过来的文件接收类型
  changeFile: changeFileType; // 父级传过来的文件修改事件函数
  [propName: string]: any;
};
interface Upload {
  state: StateType;
  props: PropType;
  inputDom: any;
}
class Upload extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
    };
    this.inputDom = createRef(); // input标签DOM
  }
  
  // 文件修改的事件函数
  private changeFile = (e: any): void => {
    const file = e.target.files[0];
    if (!file.size) {
      return;
    }
    const formData = new FormData();
    formData.append('file', file);
    const params = {
      file: formData,
      fileType: file.type
    };
    this.props.changeFile(params);
    this.inputDom.current.value = null;
  }
  render() {
    const { accept } = this.props;
    return (
      <Fragment>
        <input type="file" ref={this.inputDom} id="file" accept={accept} onChange={this.changeFile} className="file-input" />
      </Fragment>
    )
  }
}
export default Upload;

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

// 图片文件上传
private changeImgFile = (e: any): void => {
  this.setState({
    imgFile: e.file,
  });
}
  
<Upload accept='image/*' changeFile={this.changeImgFile} />