前端文件上传全过程

特别说明: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',})
}

四、第四步将上传接口弄明白
在这里插入图片描述
五、第五步将上传结果演示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 56.合并区间-Python

链接&#xff1a;56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff…

【基础知识】网络套接字编程

套接字 IP地址 port&#xff08;端口号&#xff09; socket&#xff08;套接字&#xff09; socket常见API //创建套接字 int socket(int domain, int type, int protocol); //绑定端口 int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen); //监听套接字…

Prometheus篇之利用promtool工具校验配置正确性

promtool工具 promtool是Prometheus的一个命令行工具&#xff0c;它提供了一些功能来帮助用户进行Prometheus配置文件&#xff08;如prometheus.yml&#xff09;的检查、规则检查和调试。 解释 promtool check config: 验证Prometheus配置文件的语法和设置。 promtool命令&…

【最基础最直观的排序 —— 选择排序算法】

最基础最直观的排序 —— 选择排序算法 选择排序算法是一种简单直观的排序算法。其基本思想是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&a…

vue3常用的组件间通信

一 props props 可以实现父子组件通信&#xff0c;props数据是只读。 1. 基本用法 在父组件中&#xff0c;你可以这样传递 props&#xff1a; <template><ChildComponent message"Hello, Vue 3!" /> </template><script setup> import C…

WebPage-Bootstrap框架(container类,container-fluid类,栅格系统)

1.Bootstrap Bootstrap为页面内容和栅格系统包裹了一个.container容器&#xff0c;框架预先定义类 1.1container类 响应式布局容器的宽度 手机-小于768px 宽度设置100%&#xff1b; 平板-大于等于768px 设置宽度为750px 桌面显示器-大于等于992px 设置宽度 970px 大屏幕显…

【Bug解决】Nacos启动成功,但却无法访问(提示:无法访问此网站,192.168.10.88的响应时间过长)

情形如下&#xff1a;第一次启动运行一些正常&#xff0c;非正常关闭虚拟机&#xff0c;第二次启动虚拟机查看容器状态如下&#xff1a; docker nacos容器一切正常启动&#xff0c;但是就是无法访问web控制面板&#xff0c;访问无法连接。 首先&#xff1a;执行命令查看日志 …

设置元素浮动,出现高度塌陷导致鼠标无法点击

先贴代码片段&#xff1a; <div style"width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]" suffixIconButton"><input type"text" nz-input placeholder"请输入实验名称" [(ngModel)]"q.name&…

glTF格式:WebGL应用的3D资产优化解决方案

摘要 glTF作为一种高效的3D资产格式&#xff0c;为WebGL、OpenGL ES和OpenGL运行时的应用提供了强有力的支持。它不仅简化了3D模型的传输与加载流程&#xff0c;还通过优化资产大小&#xff0c;使得打包、解包更加便捷。本文将深入探讨glTF格式的优势&#xff0c;并提供实用的代…

ClickHouse 与 Quickwit 集成实现高效查询

1. 概述 在当今大数据分析领域&#xff0c;ClickHouse 作为一款高性能的列式数据库&#xff0c;以其出色的查询速度和对大规模数据的处理能力&#xff0c;广泛应用于在线分析处理 (OLAP) 场景。ClickHouse 的列式存储和并行计算能力使得它在处理结构化数据查询时极具优势&…

初探shell与bash使用指南

文章目录 一、shell二、bash第一步、新建脚本第二步、添加权限第三步、执行bash脚本 在日常开发中&#xff0c;经常使用到Linux服务器相关知识&#xff0c;输入命令获取想要的结果&#xff0c;本篇介绍shell 与 bash的相关知识。 一、shell 是命令行解释器&#xff0c;接收用户…

nlohmann json:读写json文件

读写json文件是经常的操作,可以通过如下的方式完成: #include <string> #include <iostream> #include <fstream> #include <filesystem> #include <nlohmann/json.hpp>using namespace std; using json = nlohmann::json; namespace fs = st…

使用nc命令检测UDP端口

使用nc命令检测UDP端口也是非常的简单&#xff0c;需要注意的是&#xff0c;所安装nc的版本不同&#xff0c;使用选项有点差异。 1、检测开启的UDP nc -vuz 192.168.2.201 5353 nc -vuz 192.168.2.201 37430 端口正常启用时&#xff0c;会提示“UDP packet sent successful…

深入解析网络通信关键要素:IP 协议、DNS 及相关技术

我的主页&#xff1a;2的n次方_ 1. IP 协议报头结构 4 位版本&#xff1a;表示 IPv4 / IPv6 4 位首部长度&#xff1a;表示 IP 报头的长度&#xff0c;以 4 字节为单位 8 位服务类型&#xff1a;包括 3 位优先权字段&#xff08;已弃用&#xff09;&#xff0c;4 位 TOS 字…

电路 - 笔记2

1 555 芯片 2 类比 - pU*I 与 Fm*a 是不是可以与牛顿定律类比 - Fm*a 人的力量&#xff08;F&#xff09;有限。 当推大箱子&#xff08;m&#xff09;时&#xff0c;加速度&#xff08;a&#xff09;就不会很大 当推小箱子&#xff08;m&#xff09;时&#xff0c;加速度…

分布式框架 - ZooKeeper

一、什么是微服务架构 1、单体架构 顾名思义一个软件系统只部署在一台服务器上。 ​ 在高并发场景中&#xff0c;比如电商项目&#xff0c;单台服务器往往难以支撑短时间内的大量请求&#xff0c;聪明的架构师想出了一个办法提高并发量&#xff1a;一台服务器不够就加一台&am…

球体检测系统源码分享

球体检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

Ubuntu20.04点击文件闪退

在 Ubuntu 系统下&#xff0c;如果点击文件按钮导致系统闪退&#xff0c;可以尝试以下几种解决方法&#xff1a; 更新系统和应用程序&#xff1a; 确保你的系统和所有应用程序都是最新版本。可以通过终端执行以下命令来更新系统&#xff1a; sudo apt update sudo apt upgrade重…

python爬虫解析神器Xpath——lxml库(9)

文章目录 1、Xpath1.1 什么是xpath?1.2 xpath的原理1.3 xml介绍1.3.1 什么是xml?1.3.2 xml和html的区别?1.3.3 xml文档的节点关系1.4 xpath语法的使用1.4.1 选取节点1.4.2 选取未知节点1.4.3 同时使用多个路径表达式2、lxml库2.1 介绍2.2 基础使用2.3 文件读取html文档2.4 实…

springboot实战学习笔记(5)(用户登录接口的主逻辑)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发以及注册时的参数合法性校验。具体往回看了解的链接如下。 springboot实训学习笔记&#xff08;4&#xff09;(Spring Validation参数校验框架、全局异常处理器)-CSDN博客文章浏览阅读576次&#xff0c;点赞7…