前端文件上传全过程

news2024/9/25 18:53:09

特别说明：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)$/i
            const 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>
                    <DatePicker
                        onChange={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',
    })
}