导入,上传 import {Upload} from 'antd'_import和upload-优快云博客

本文链接：https://blog.youkuaiyun.com/lx_9119/article/details/105096225

本文详细介绍了如何在Ant Design框架中利用`import { Upload } from 'antd'`导入并使用Upload组件进行文件上传操作，包括基本用法、上传参数配置和自定义样式等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { getToken } from '@/utils/cookies';
import defaultSetting from '@/defaultSetting';

const self = this;
    function beforeUpload(file) {
    //格式自选，类型自己定义
      const isXlsx= file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isXlsx) {
        message.error('只能上传 xlsx 文件!');
      }
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        message.error('Xlsx 上传不能超过 5MB!');
      }
      return isLt5M&&self.setState({loading:false})&&isXlsx;
    }

    const action = `${defaultSetting[process.env.NODE_ENV].baseUrl}${defaultSetting.proxyUrl}/report/importAttendanceRecords`;
    const props = {
      name: 'file',
      action, // 上传地址！！！！！
      headers: {
        Authorization: getToken(),
      },
      beforeUpload,
      // accept:".xls , .xlsx",
      onChange(info) {
        self.setState({
          loading:true
        })
        console.log(info.file.status,"info.file.status")
        const isLt2M = info.file.size / 1024 / 1024 < 5;
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
          // if (info.file && info.file.response && info.file.response.code === 200) {
          //   // dispatch({
          //   //   type: 'statemanagement/list',
          //   //   data:info.file.response.data
          //   // })
          // }else
          if(info.file && info.file.response && info.file.response.code !== 200){
            // const data =info.file&&info.file.response&&info.file.response.data&&info.file.response.data;
            // console.log(data,"data");
            self.setState({
              loading:false,
              visible: true,
              ModalText: info.file.response.data ? info.file.response.data :[]
            })
          }

        }
        if (info.file.status === 'done' && info.file.response && info.file.response.code === 200) {
          message.success(`${info.file.name} 导入成功`);
          self.setState({
            loading:false
          })
        } else if (info.file.status === 'error' ||  info.file.response && info.file.response.code !== 200 || !isLt2M) {
          message.error(`${info.file.name} 导入失败`);
          self.setState({
            loading:false
          })
        }
      },
    };
    
<Upload className={styles.Upload} {...props}><Button type="danger" style={{float:"right",background:"rgba(122,135,185,1)",color:"#fff",border:"none"}} icon="download" loading={this.state.loading}>导入特殊工时</Button></Upload>