简简单单的一个上传文件、react、input file、利用事件获取本地文件

一、场景

我需要点击一个按钮，来选取本地的文件；获取到文件的对象后，再去处理或者上传；

二、思路

1、利用 H5 input 的 file 属性来选取文件；
2、但是我不要展示这个控件，所以需要用一个【dom节点：比如按钮】来模拟这个input 的 click 点击事件；这个 input 需要隐藏：dispaly:none;
3、选取文件之后、监听 onchange 事件就可以获取到文件了；

input - accept 类型参考：MDN - 常见 MIME 类型列表

三、实现

import React, { Component } from 'react'

class Upload extends Component {
  // 触发选择文件模拟点击事件
  getFilds = () =>{
    const filedom = document.getElementById('file');
    filedom.click()
  }
  // 用于监听按钮上传的事件
  fileinputChange = (event) =>{
    const fileData = event.target.files[0];
    // 获取到的文件 fileData
    // if(fileData){
    //   this.setState({ fileData, })
    //   const formdata = new FormData();
    //   formdata.append("wordType",3);
    //   formdata.append("file",fileData);
    //   this.send(formdata)
    // }
  }
  // 文件上传
  // send =  async (formdata) =>{
  //   // const url = "url";
  //   fetch(url, {
  //     method:'post',
  //     headers:{
  //       "X-token":token,
  //     },
  //     body:formdata,
  //   }).then(res=>res.json()).then(res=>{
  //     // 处理返回值
  //     console.log(`res`, res)
  //     // if(res.code===1000){
  //     //   Notify.success(res.desc)
  //     // } else Notify.error(res.desc)
  //   })
  // }

  render() {
    return (
      <div>
        <input id="file" type="file" accept=".xls,.xlsx"
         	style={{ display:"none", }}
         	onChange={this.fileinputChange}
        />
        <button onClick={this.getFilds}>上传excel</button>
      </div>
    )
  }
}

const FileUpload = getControlGroup(Upload);
export default FileUpload;