ANTD UPLOAD组件change事件仅触发一次？避开这坑！

2023-11-16 12:47:06

React JS 中 Ant Design Upload 组件 onChange 事件只触发一次的解决之道

在前端应用程序开发中，文件上传是不可或缺的功能。React JS 与 Ant Design UI 库的结合为我们提供了构建美观、实用的文件上传组件的强大工具。然而，在使用 Upload 组件时，您可能遇到过一个棘手的问题：onChange 事件仅在首次选择文件时触发。本文旨在深入探究这一问题的根源，并提供全面且易于理解的解决方案。

问题背后的原因

要解决 onChange 事件只触发一次的问题，我们必须首先了解其背后的原因：

文件状态管理： Upload 组件使用受控组件的方式管理文件状态，这意味着它本身负责维护文件的状态。因此，当文件发生变化时，组件内部的状态也会更新，但 onChange 事件只会在第一次文件变化时触发。
默认参数设置： 默认情况下，Upload 组件的 multiple 属性设置为 false，表示一次只能上传一个文件。因此，当您选择多个文件时，只有第一个文件会被上传，而 onChange 事件也只会在第一次文件选择时触发。
异步文件上传： 文件上传是一个异步过程，这意味着需要一定时间才能完成。在文件上传期间，onChange 事件可能已经触发完毕，而文件可能尚未完全上传。这会导致您无法及时获取文件上传的最终结果。

解决方案

现在我们已经了解了问题的原因，让我们探讨有效的解决方案：

使用受控组件

为了避免 onChange 事件只触发一次，您可以使用受控组件的方式管理文件状态。这意味着您需要在外部组件中维护文件状态，并通过 props 传递给 Upload 组件。当文件发生变化时，您需要更新外部组件中的状态，并通过 props 传递给 Upload 组件，从而触发 onChange 事件。

设置 multiple 属性

如果您需要上传多个文件，请将 Upload 组件的 multiple 属性设置为 true。这样，您就可以一次选择多个文件，并且 onChange 事件会在每次文件选择时触发。

使用异步函数

为了在文件上传完成后获取最终结果，您可以在 onChange 事件处理函数中使用异步函数。这样，您就可以在文件上传完成后执行相应的操作。

代码示例

以下代码演示了如何使用受控组件和异步函数来解决 onChange 事件只触发一次的问题：

import React, { useState } from "react";
import { Upload } from "antd";

const App = () => {
  const [fileList, setFileList] = useState([]);

  const onChange = (info) => {
    setFileList(info.fileList);
  };

  const onFinish = (info) => {
    console.log(info.file.response);
  };

  return (
    <Upload
      action="/api/upload"
      onChange={onChange}
      fileList={fileList}
      onFinish={onFinish}
      multiple
    >
      <Button>选择文件</Button>
    </Upload>
  );
};

export default App;

总结

通过理解文件状态管理、默认参数设置和异步文件上传的原理，我们能够有效解决 React JS 中 Ant Design Upload 组件 onChange 事件只触发一次的问题。使用受控组件、设置 multiple 属性和使用异步函数，您可以确保 onChange 事件在每次文件选择或上传完成后触发，从而获得更好的文件上传体验。

常见问题解答