网站建设服务哪家好,唐山专业做网站,跨境电商综合服务平台有哪些,如何做淘宝网网站域名特别说明#xff1a;ui框架使用的是蚂蚁的antd 这里主要是学习前端上传接口的传递参数包括前端上传之前对于代码的整理 一、第一步将前端页面画出来 源代码#xff1a;
/** 费用管理 - IT费用管理 - 费用数据上传 */
import { useState } from react;
import {… 特别说明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] useStateboolean(false);const [fileList, setFileList] useStateany([]); //上传的文件列表const [dateString, setDateString] useStatestring(); // 数据日期// 文件组件属性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 tiploading... spinning{loading}Card bordered{false} style{{ width: 100%, minHeight: calc(100vh - 196px), paddingTop: 60px, paddingLeft: 80px }}div classNamedateControlspan classNametitle数据日期/spanDatePickeronChange{onChange}style{{ width: 200 }}pickermonthvalue{dateString ? dayjs(dateString) : } //divdiv classNameuploadAndDownloadspan上传文件/spanUpload.Dragger {...uploadProps}fileList{fileList}classNamedraggerStylep classNameant-upload-drag-iconInboxOutlined //pp classNameant-upload-text点击或者将文件拖拽到这里上传/pp style{{ color: #0000006e }}支持扩展名xlsx,xls/p/Upload.Dragger/divdiv classNamebuttonOptionButton typeprimary onClick{() {//console.log(点击提交, fileList);if (fileList.length 0) {handleUpload(fileList[0])} else {message.error(请上传文件)}}}提交/ButtonButton 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,})
}四、第四步将上传接口弄明白 五、第五步将上传结果演示
呀这个就是整个的前端部分的文件上传需要注意的是对上传接口的处理其它的倒没有什么相对于文件下载需要对接收到的数据流还要处理而言整个文件上传还是异常简单的有没有感觉到。
