【React工作记录八十一】ant design upload实现多个文件一次上传(全网首发)

前端大歌谣

已于 2023-03-06 10:13:28 修改

阅读量896

点赞数 1

分类专栏：前端项目工作实战文章标签： javascript 前端 react.js

于 2023-02-10 19:24:15 首次发布

本文链接：https://blog.csdn.net/geyaoisnice/article/details/128975477

版权

前端项目工作实战专栏收录该内容

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

前言

大家好我是歌谣在日常的学习生活中我们会遇到各种各样的问题今天在工作中就遇到了多个文件上传的时候会调用多次接口感谢群友的帮助想加入前端巅峰交流群可以私信我

在这里插入图片描述

原因

一开始不知道原因后来在群友的帮助下最后知道了原因
是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 && set