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 (
 <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>
 );
}

<Upload
 name="file"
 customRequest={customRequest}
 multiple={true}
 beforeUpload={beforeUpload}
 headers={{ Authorization: getToken() || "" }}
 >
 <Button style={{ width: "100%" }} icon={<UploadOutlined />}>
 上传
 </Button>
 </Upload>

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;
 }
 };
 };
 })();

我是歌谣 感谢生命中帮助你的每一个人 感谢山川~