【antd】Upload上传组件封装

这里笔者用的是react+antd

原生antd的写法

const props = {
  name: 'file',
  // 接受的文件类型
  accept: '.xls,.xlsx',
  // 上传的地址
  action: 'url',
  // 是否展示上传的文件
  showUploadList:false,
  // 上传的参数
  data: {
    // token: Cookies.get("token"),
    // uid: Cookies.get('uid')
  },
  withCredentials: true,
  // 设置上传的请求头部，IE10 以上有效
  headers: {
    // authorization: 'authorization-text',
    // "Content-Type": "multipart/form-data"
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      message.loading("正在导入中，请稍后");
    }
    if (info.file.status === 'done') {
      if (info.file.response.statusCode !== 200) {
        setTimeout(() => {
          message.destroy();
          message.error(info.file.response.message);
        });
      } else {
        // 上传成功后的服务
      }
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

<Upload {...props} >
  	导入Button>
Upload>

封装后

配置

import React, { Component } from 'react';
import {Button,Upload,message,} from 'antd';
import PropTypes from 'prop-types';

class ImportExportExcel extends Component {
  constructor(props) {
    super(props);
    // 模板下载事件
    this.jumpTo = this.jumpTo.bind(this);
    // 表格导出事件
    this.exportExcel = this.exportExcel.bind(this);
    // 表格上传事件
    this.uploadProps.onChange = this.uploadProps.onChange.bind(this);
  }
  // 模板下载
  jumpTo() {
    window.open(this.props.templateHref);
  }
  // 上传参数
  uploadProps = {
    // 发到后台的文件参数名
    name: 'file',
    // 接受的文件类型
    accept: '.xls,.xlsx',
    // 上传的地址
    action: this.props.url,
    // 是否展示上传的文件
    showUploadList:false,
    // 上传的参数
    data: {
      // token: Cookies.get("token"),
      // uid: Cookies.get('uid')
    },
    withCredentials: true,
    // 设置上传的请求头部，IE10 以上有效
    headers: {
      // authorization: 'authorization-text',
      // "Content-Type": "multipart/form-data"
    },
    // 上传文件前的钩子函数
    beforeUpload() {
      message.loading('正在导入中...');
      return true;
    },
    // 上传文件改变时的状态
    onChange(info) {
      if (info.file.status !== 'uploading') {
		
      }
      if (info.file.status === 'done') {
        if (info.file.response.statusCode !== 200) {
          setTimeout(() => {
            message.destroy();
            message.error(info.file.response.message);
          });
        } else {
          console.log(info.file.response);
          this.props.importSuccessCallback && this.props.importSuccessCallback(info.file.response);
          setTimeout(() => {
            // message.destroy();
            if(info.file.response.message===''){
              message.destroy();
              message.success('导入成功');
            }else{
              message.warn(info.file.response.message);
            }

          });
        }
      } else if (info.file.status === 'error') {
        setTimeout(() => {
          message.destroy();
          message.error('导入失败');
        });
      }
    },
  }

  // 导出Excel表格
  exportExcel() {
    const url = this.props.url ;
    window.open(url);
  }

  render() {
    const uploadProps = this.uploadProps;
    return [
      <Upload key='importExcel' {...uploadProps}  >
        <Button type="primary">{this.props.text}</Button>
      </Upload>
    ]
  }
}

// 定义参数类型
ImportExportExcel.propTypes = {
  // 模板下载地址
  templateHref: PropTypes.string.isRequired,
  // 上传地址
  url: PropTypes.string.isRequired,
  // 导入成功后的回调
  importSuccessCallback: PropTypes.func
};

export default ImportExportExcel;

使用

可以自定义传入按钮名称、上传地址、模板文件、成功回调函数

 {
        if(res.statusCode===200){
          // 成功后的回调
      }
    }
  />

Java后台接收

@PostMapping("/importExcel1")
public JsonResult importExcel1(@RequestParam(value = "file") MultipartFile file,@RequestParam(value="datasourceId") String datasourceId){
	Workbook workbook = WorkbookFactory.create(inputStream);
    int sheetsNum = workbook.getNumberOfSheets();
    ...
}