前端文件上传全过程
特别说明: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',})
}
四、第四步将上传接口弄明白

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



🆗呀,这个就是整个的前端部分的文件上传,需要注意的是对上传接口的处理,其它的倒没有什么,相对于文件下载需要对接收到的数据流还要处理而言,整个文件上传还是异常简单的有没有感觉到。
相关文章:
前端文件上传全过程
特别说明:ui框架使用的是蚂蚁的antd 这里主要是学习前端上传接口的传递参数包括前端上传之前对于代码的整理 一、第一步将前端页面画出来 源代码: /** 费用管理 - IT费用管理 - 费用数据上传 */ import { useState } from "react"; import {…...
MySQL中的函数简单总结,以及TCL语句的简单讲解
文章目录 一、函数1、ifnull2、if3、case4、exists 存在5、字符串函数(重点)6、数学函数7、日期函数 二、TCL语句1、创建用户2、赋予权限3、修改mysql允许远程登录 一、函数 1、ifnull 当前⾯的值是null的时候,使⽤后⾯的默认值 ifnull(字段…...
GPS在Linux下的使用(war driving的前置学习)
1.ls /dev/tty* 列出所有与 tty 相关的设备文件。这些设备文件通常对应终端设备 ttyUSB0是GPS端口 2.cat /dev/ttyUSB0 用于读取并显示连接到 /dev/ttyUSB0 串口设备发送的原始数据 这种是GPS定位不全的,要拿到更开阔的地方 这种是GPS定位全的 因为会持续输出…...
开发经验总结: 读写分离简单实现
背景 使用mysql的代理中间件,某些接口如果主从同步延迟大,容易出现逻辑问题。所以程序中没有直接使用这个中间件。 依赖程序逻辑,如果有一些接口可以走读库,需要一个可以显示指定读库的方式来连接读库,降低主库的压力…...
MySQL(面试题 - 同类型归纳面试题)
目录 一、MySQL 数据类型 1. 数据库存储日期格式时,如何考虑时区转换问题? 2. Blob和text有什么区别? 3. mysql里记录货币用什么字段类型比较好? 4. MySQL如何获取当前日期? 5. 你们数据库是否支持emoji表情存储&…...
【C++ Primer Plus习题】17.7
问题: 解答: #include <iostream> #include <vector> #include <string> #include <fstream> #include <algorithm>using namespace std;const int LIMIT 50;void ShowStr(const string& str); void GetStrs(ifstream& fin, vector<…...
vue3(整合版)
创建第一个vue项目 1.安装node.js cmd输入node查看是否安装成功 2.vscode开启一个终端,配置淘宝镜像 # 修改为淘宝镜像源 npm config set registry https://registry.npmmirror.com 输入如下命令创建第一个Vue项目 3.下载依赖,启动项目 访问5173端口 …...
复制他人 CSDN 文章到自己的博客
文章目录 0.前言步骤 0.前言 在复制别人文章发布时,记得表明转载哦 步骤 在需要复制的csdn 文章页面,打开浏览器开发者工具(F12)Ctrl F 查找"article_content"标签头 右键“Copy”->“Copy element”新建一个 tx…...
【算法——二分查找】
理论基础: 程序员面试经典题,二分搜索一个区间,区间查找 (LeetCode 34)_哔哩哔哩_bilibili 手把手带你撕出正确的二分法 | 二分查找法 | 二分搜索法 | LeetCode:704. 二分查找_哔哩哔哩_bilibili 这个是红蓝法,很牛…...
Cisco Packet Tracer的安装加汉化
这个工具学计算机网络的同学会用到 1.下载安装 网盘链接:https://pan.baidu.com/s/1CmnxAD9MkCtE7pc8Tjw0IA 提取码:frkb 点击第一个进行安装,按步骤来即可。 2.汉化 (1)复制chinese.ptl文件 (2&…...
MMain函数定义为WinMain函数看port1632.h和pwin32.h文件
编译win2k3的源代码的时候有时候看到MMain函数 ..//public/sdk/inc/port1632.h #if defined(WIN16) /* ---------------- Maps to windows 3.0 and 3.1 16-bit APIs ----------------*/ #include "ptypes16.h" #include "pwin16.h" #include "plan16.…...
单词搜索问题(涉及递归等)
目录 一题目: 二思路解释: 三解答代码: 一题目: newcode题目链接: 单词搜索_牛客题霸_牛客网 二思路解释: 思路:个人理解是找到word中的第一个元素,然后去递归的上下左右查找&am…...
Redis的一些通用指令
首先我们需要先连接客户端服务器,此时我们需要通过redis-cli和redis服务器进行交互,输入ping来确保通路的流畅 (一)get和set redis中最核心的两个命令就是get和set,get就是根据key来取出对应value,set就是把…...
C++中vector类的使用
目录 1.vector类常用接口说明 1.1默认成员函数 1.1.1构造函数(constructor) 1.1.2 赋值运算符重载(operator()) 2. vector对象的访问及遍历操作(Iterators and Element access) 3.vector类对象的容量操作(Capacity) 4. vector类对象的修改及相关操作(Modifiers and Stri…...
cmaklist流程控制——调试及发布
cmaklist流程控制 目前只会配置-编译调试-打包发布,并且不会workflow控制 后续学习配置-编译调试-测试-打包发布,workflow控制,理解整个流程,目前对流程控制理解也不够。 1.CMake Presets 先于Cmakelist文件,指导项…...
制作一个能对话能跳舞的otto机器人
OTTO机器人是一个开源外壳,硬件和软件的桌面机器人项目,非常适合新手研究和拓展。记住,他是一个能移动有表情能声音的机器人。 b站有很多演示和组装的视频,我就不多说了,照着做就好,因为硬件我也是刚入门&…...
git配置SSH
1 打开cmd窗口 2 在窗口中输入如下命令: 配置用户名: git config --global user.name “gyk” 配置邮箱: git config --global user.email “247929163qq.com” 继续在Git命令窗口中输入如下命令,即可生成SSH公钥和私钥 ss…...
mozilla/pdf.js view.html加载指定页码
mozilla/pdf.js view.html加载指定页码 在Mozilla’s PDF.js中,如果你想要在viewer.html加载时直接跳转到指定的页码,你可以通过修改URL来实现。 PDF.js使用查询参数来处理URL,其中page参数用于指定页码。你可以通过修改URL的查询字符串来设…...
Qt之QFuture理解
结构 #mermaid-svg-J9J683RG8QjtEqoM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-J9J683RG8QjtEqoM .error-icon{fill:#552222;}#mermaid-svg-J9J683RG8QjtEqoM .error-text{fill:#552222;stroke:#552222;}#merm…...
求二叉树的高度(递归和非递归)
假设二叉树采用二叉链表存储结构,设计一个算法求二叉树的高度。 递归: int getTreeHight(BiTree T){if(TNULL){return 0;}else {int lh getTreeHight(T->lchild);int rh getTreeHight(T->rchild);return (lh>rh?lh:rh)1;}}时间复杂度O(n)&a…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
