导入excle(react + axios )

html 部分

// Modal 是一个封装的弹窗组件, html 部分只需要input 即可
<Modal title='导入数据' show={showImportModal} onConfirm={this.handleImportExcle.bind(this)} onCancel={this.handleCancleModel.bind(this)}>
      <input className='file-input' type="file" accept='.xls,.xlsx' onChange={this.handleChangeFile.bind(this)}></input>
</Modal>

业务逻辑处理部分

 // 导入
    handleImport() {
       // 解决第二次打开弹窗不选择文件, 保留的this.file 是上次的文件
        if(this.file) {
            this.file = ''
        }
        this.setState({
            showImportModal: true
        })
    }
    // input change 事件
    handleChangeFile(event) {
        this.file = event.target.files[0]
    }

  // 弹窗确认事件
    handleImportExcle() {
       if (!this.file || this.file === undefined) {
            msg('请选择需要导入的文件', 'warning')
            return
        }
        if(this.file.name.split('.')[1] === 'xls' || this.file.name.split('.')[1] === 'xlsx' ) {
            var formData = new FormData()
            // 接口需要的值,按下面方式添加就可以
            formData.append('file', this.file)
            formData.append('connectType', '2')

            importExcel('connectJointService/importGearBoxConnect', formData, () => this.update())
        }else {
            msg('文档格式不正确, 仅支持 .xls, .xlsx', 'warning')
            return
        }
        
        this.setState({
            showImportModal: false
        })
    }
// 关闭弹窗事件
    handleCancleModel() {
        this.setState({
            showImportModal: false
        })
    }

importExcel 组件

import axios from 'axios'
import config from './config'
import msg from '../components/Msg';

const importExcel = (url, params) => {
// Content-Type 数据传输的类型, 这里一定要记得写上
// url: 请求地址是因为我在后台统一配置了地址, 所以有了${config.searchServer}${url},这样我也可以在任意模块随意调用
 return new Promise((resolve, reject) => { 
        axios({
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            url: `${config.searchServer}${url}`,
            data: params
        }).then(data => {
             if (data.data.code === 0 || data.data.code === -1) {
                    msg(data.data.msg)
                } 
               resolve(data.data)
        }).catch(data => {
                reject(data)
        })
    }
}
export default importExcel

2019-11-19 18: 05