前端文件上传全过程

特别说明：ui框架使用的是蚂蚁的antd 这里主要是学习前端上传接口的传递参数包括前端上传之前对于代码的整理

一、第一步将前端页面画出来

源代码：

/** 费用管理 - 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',})
}

四、第四步将上传接口弄明白

五、第五步将上传结果演示

🆗呀，这个就是整个的前端部分的文件上传，需要注意的是对上传接口的处理，其它的倒没有什么，相对于文件下载需要对接收到的数据流还要处理而言，整个文件上传还是异常简单的有没有感觉到。