一、第一步将前端页面画出来
源代码:
/** 费用管理 - IT费用管理 - 费用数据上传 */
import { useState } from "react";
import { WARNING_INFO } from "@/constants";
import { InboxOutlined } from "@ant-design/icons";
import { Button, Card, DatePicker, message, Spin, Upload, UploadProps } from "antd";
import dayjs from 'dayjs'
import './index.less'
import { ITDataUpload } from "@/services/costControl";const DataUpload = () => {const [loading, setLoading] = useState<boolean>(false);const [fileList, setFileList] = useState<any>([]); //上传的文件列表const [dateString, setDateString] = useState<string>(''); // 数据日期// 文件组件属性const uploadProps: UploadProps = {multiple: false,maxCount: 1,onChange(info) {},beforeUpload: (file) => {console.log('上传文件', file);const regExp = /^.*\.(?:xls|xlsx)$/iconst isExcel = regExp.test(file.name)if (!isExcel) {message.error(WARNING_INFO.EXCEL_INFO);return Upload.LIST_IGNORE}// if (file.size > 1024 * 1024 * 10) {// message.error(`${file.name}大小不能超过10M`);// return Upload.LIST_IGNORE;// }// 通过校验开始上传setFileList([file])// 阻止自动上传return false;},onRemove: () => {//console.log('删除');setFileList([])},onDrop(e) {//console.log('Dropped files', e.dataTransfer.files);},};const handleUpload = async (fileList: any) => {if (!dateString) {message.error('请选择数据日期')} else {//console.log('时间',dateString);//console.log('文件',fileList);try {setLoading(true);let res = await ITDataUpload({ date: dateString, file: fileList })//console.log('上传文件res', res);if (res?.code == 200) {message.success('数据文件上传成功')setLoading(false);setFileList([])setDateString('')} else {message.error('数据文件上传失败')setLoading(false);}} catch {setLoading(false);}}}const onChange = (date: any, dateString: any) => {setDateString(dayjs(dateString, 'YYYY-MM').format("YYYY-MM-01"))}return (<Spin tip="loading..." spinning={loading}><Card bordered={false} style={{ width: '100%', minHeight: 'calc(100vh - 196px)', paddingTop: '60px', paddingLeft: '80px' }}><div className="dateControl"><span className="title">数据日期:</span><DatePickeronChange={onChange}style={{ width: 200 }}picker="month"value={dateString ? dayjs(dateString) : ''} /></div><div className='uploadAndDownload'><span>上传文件:</span><Upload.Dragger {...uploadProps}fileList={fileList}className="draggerStyle"><p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">点击或者将文件拖拽到这里上传</p><p style={{ color: '#0000006e' }}>支持扩展名:xlsx,xls</p></Upload.Dragger></div><div className='buttonOption'><Button type="primary" onClick={() => {//console.log('点击提交', fileList);if (fileList.length > 0) {handleUpload(fileList[0])} else {message.error('请上传文件!')}}}>提交</Button><Button onClick={() => {//console.log('点击重置');setFileList([])setDateString('')}}>重置</Button></div></Card></Spin>)
}export default DataUpload
二、第二步将封装上传接口的函数整理出来(这个是核心)
源码:
const handleUpload = async (fileList: any) => {if (!dateString) {message.error('请选择数据日期')} else {//console.log('时间',dateString);//console.log('文件',fileList);try {setLoading(true);let res = await ITDataUpload({ date: dateString, file: fileList })//console.log('上传文件res', res);if (res?.code == 200) {message.success('数据文件上传成功')setLoading(false);setFileList([])setDateString('')} else {message.error('数据文件上传失败')setLoading(false);}} catch {setLoading(false);}}}
三、第三步将封装的接口弄明白
源代码:
export const ITDataUpload = async (data: any) => {return request(costControlApi.ITDataUpload, {method: 'POST',data,headers: { 'Content-Type': 'multipart/form-data' },requestType: 'form',})
}
四、第四步将上传接口弄明白
五、第五步将上传结果演示
🆗呀,这个就是整个的前端部分的文件上传,需要注意的是对上传接口的处理,其它的倒没有什么,相对于文件下载需要对接收到的数据流还要处理而言,整个文件上传还是异常简单的有没有感觉到。