前端歌谣 前言
大家好 我是歌谣 在日常的学习生活中 我们会遇到各种各样的问题 今天在工作中就遇到了多个文件上传的时候会调用多次接口 感谢群友的帮助 想加入前端巅峰交流群可以私信我
原因
一开始不知道原因 后来在群友的帮助下 最后知道了原因 是onChange的原因
上传中、完成、失败都会调用这个函数思路解答
群友给的demoimport "./styles.css";
import React, { useState, useEffect, useRef } from "react";
import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
export default function App() {
const fileState = useRef();
const [uploadFiles, setUploadFiles] = useState([]);
const updateFiles = (function () {
let fileList;
return function (list, setState) {
if (!fileList) {
fileList = list;
setState && setState(list);
}
return {
fileList,
reset() {
fileList = false;
}
};
};
})();
function beforeUpload(_, fileList) {
fileState.current = updateFiles(fileList, setUploadFiles);
return false;
}
const customRequest = () => {
console.log("自定义上传", uploadFiles);
};
useEffect(() => {
if (uploadFiles.length > 0) {
customRequest();
fileState.current.reset();
}
}, [uploadFiles]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Upload
listType="picture"
maxCount={3}
multiple
beforeUpload={beforeUpload}
>
<Button>Upload (Max: 3)</Button>
</Upload>
</div>
);
}项目给的demo
upload部分
<Upload
name="file"
customRequest={customRequest}
multiple={true}
beforeUpload={beforeUpload}
headers={{ Authorization: getToken() || "" }}
>
<Button style={{ width: "100%" }} icon={<UploadOutlined />}>
上传
</Button>
</Upload>beforeUpload部分
const fileState: any = useRef();
const [uploadFiles, setUploadFiles] = useState([]);
const updateFiles = (function () {
let fileList: any = null;
return function (list: any, setState: any) {
if (!fileList) {
fileList = list;
setState && setState(list);
}
return {
fileList,
reset() {
fileList = false;
}
};
};
})();
useEffect(() => {
if (uploadFiles.length > 0) {
customRequest();
fileState.current.reset();
}
}, [uploadFiles]);
function beforeUpload(_: any, fileList: any) {
fileState.current = updateFiles(fileList, setUploadFiles);
return false;
}
const [loadingButton,setLoadingButton]=useState<boolean>(false)
const customRequest = () => {
let formData = new FormData();
uploadFiles.forEach((file: any, index: any) => {
formData.append(`file`, file
);
});
uploadFile("manufacture/cutScheme/batchUploadDrawing", formData).then((res) => {
if (res.code == 200) {
setFileId(res.data.fileIdList)
message.success("文件上传成功")
setLoadingButton(false)
} else {
message.error(res.msg)
}
})
};解析部分
multiple多选文件
return false控制只执行一次
customRequest
formdata转文件格式
let formData = new FormData();
uploadFiles.forEach((file: any, index: any) => {
formData.append(`file`, file
);核心 hook写法
const updateFiles = (function () {
let fileList: any = null;
return function (list: any, setState: any) {
if (!fileList) {
fileList = list;
setState && setState(list);
}
return {
fileList,
reset() {
fileList = false;
}
};
};
})();总结
我是歌谣 感谢生命中帮助你的每一个人 感谢山川~
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)