React+hook+ts+ant design upload实现多个文件一次上传
前言
大家好 我是歌谣 在日常的学习生活中 我们会遇到各种各样的问题 今天在工作中就遇到了多个文件上传的时候会调用多次接口 感谢群友的帮助 想加入前端巅峰交流群可以私信我
原因
一开始不知道原因 后来在群友的帮助下 最后知道了原因 是onChange的原因
上传中、完成、失败都会调用这个函数
思路解答
群友给的demo
``` import "./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 (
Hello CodeSandbox
Start editing to see some magic happen!
Upload (Max: 3)
项目给的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; } }; }; })();
总结
我是歌谣 感谢生命中帮助你的每一个人 感谢山川~
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!