前端 js 上传excel表格、文件

一、场景

1. 产品给了个设计图，需要点击【自定义】图标或者其他图片来完成上传的动作。（打开选择文件弹窗，并选择文件）
2. 思路：利用 input-type 的 “file” 属性来完成。
   -首先隐藏掉原始的 html input，设置id属性【id = file】
   -点击自定的图片或者按钮，通过js模拟 input 的点击事件，从而触发打开选择文件窗口。 【dom.click()】
   -获取到的文件file通过 FormData 来储存 然后就可以直接发送给后台了。
   
   

二、Code 如下（不重要的已经隐藏）

import React, { Component } from 'react'
import Ajax from 'zan-ajax';

class Upload extends Component {
  // 1 点击按钮，利用 js 触发选择文件
  getFilds = () =>{
    const filedom = document.getElementById('file');
    filedom.click()
  }
  // 2 用于监听按钮上传的事件
  fileinputChange = (event) =>{
    const fileData = event.target.files[0];
    // // fileData获取到的文件
    // if(fileData){
    //   this.setState({ fileData, })
    //   const formdata = new FormData();
    //   formdata.append("file",fileData);
    //   this.send(formdata)
    // }
  }
  // 文件上传
  // send = (formdata) =>{
    // Ajax({
    //   url,
    //   method:"post",
    //   data: formdata,
    //   headers: {
    //     Accept: 'application/json',
    //     'Content-Type': 'application/json',
    //   },
    // }).then(res=>{
    //   resolve(res.data)
    // }).catch((err)=>{
    //   cb ? reject(err) : console.log(`错误 err`, err);
    // })
  // }

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

export default Upload;

如果感觉对你有帮助，动动小手点个赞吧 ↓↓↓