React+ASP.NET项目中如何通过弹窗展示文件上传状态

看起来你需要在异步上传完成后，动态展示每个文件的成功/失败状态到Ant Design的notification里。结合你用了Redux-Saga的情况，我们可以通过Redux存储上传结果，再在组件中读取状态生成对应的描述文本。下面是具体的解决方案：

步骤1：确保Redux Store存储上传结果 #

首先你的Redux-Saga在处理uploadFile异步操作完成后，需要把成功和失败的文件列表分发到Store中。假设我们定义一个reducer来维护上传状态：

// reducers/uploadReducer.js
const initialState = {
  successFiles: [],
  failedFiles: [],
  isUploading: false
};

export default function uploadReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPLOAD_FILE_START':
      return { ...state, isUploading: true, successFiles: [], failedFiles: [] };
    case 'UPLOAD_FILE_COMPLETE':
      return {
        ...state,
        isUploading: false,
        successFiles: action.payload.successFiles,
        failedFiles: action.payload.failedFiles
      };
    default:
      return state;
  }
}

在你的Redux-Saga中，处理上传逻辑后，记得dispatchUPLOAD_FILE_COMPLETEaction，把包含文件名等信息的成功/失败文件数据传进去。

步骤2：组件连接Redux并监听状态变化 #

修改你的UploadFileForm组件，通过connect获取Store中的上传结果，并在状态变化时触发notification：

import * as React from "react";
import { connect } from "react-redux";
import { Form, Select, Button, Upload, message, notification} from 'antd';
import * as Actions from "../actions";
const FormItem = Form.Item;

class UploadFileForm extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  // 监听props变化，当上传完成且结果更新时展示弹窗
  componentDidUpdate(prevProps) {
    const { successFiles, failedFiles, isUploading } = this.props;
    // 仅当上传从进行中变为完成，且有结果时触发
    if (!isUploading && prevProps.isUploading && (successFiles.length > 0 || failedFiles.length > 0)) {
      this.showUploadNotification();
    }
  }

  // 生成弹窗描述文本
  showUploadNotification() {
    const { successFiles, failedFiles } = this.props;
    let description = '';

    // 拼接成功文件文本
    if (successFiles.length > 0) {
      const successNames = successFiles.map(file => `'${file.name}'`).join('、');
      description += `文件${successNames}上传成功。`;
    }

    // 拼接失败文件文本（如果有成功文件则加空格分隔）
    if (failedFiles.length > 0) {
      const failedNames = failedFiles.map(file => `'${file.name}'`).join('、');
      description += `${successFiles.length > 0 ? ' ' : ''}文件${failedNames}上传失败。`;
    }

    notification["info"]({
      message: '文件上传结果',
      description: description,
      duration: 10
    });
  }

  handleSubmit = (e) => {
    message.config({ top: 0 });
    message.loading('Importing in progress...', 3);
    e.preventDefault();
    // 触发上传action，由Redux-Saga处理异步逻辑
    this.props.uploadFile(this.props.form.getFieldsValue());
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="File" >
          {getFieldDecorator('upload', {
            valuePropName: 'fileList',
            getValueFromEvent: (e) => e.fileList.slice(-1)
          })(
            {/* beforeUpload返回false阻止自动上传，上传逻辑交给Redux-Saga处理 */}
            <Upload name="importFile" action={' '} multiple={false} beforeUpload={() => false}>
              <Button> Upload </Button>
            </Upload>
          )}
        </FormItem>
        <Button type="primary" htmlType="submit">Import</Button>
      </Form>
    );
  }
}

// 映射Store状态到组件props
const mapStateToProps = (state) => ({
  successFiles: state.upload.successFiles,
  failedFiles: state.upload.failedFiles,
  isUploading: state.upload.isUploading
});

// 连接Redux，注入uploadFile action和状态
export default connect(mapStateToProps, { uploadFile })(Form.create()(UploadFileForm));

关键说明 #

• 阻止Upload自动上传：通过beforeUpload={() => false}让Ant Design的Upload组件只负责选择文件，上传逻辑交给Redux-Saga处理，这样能更好地控制异步流程和状态。
• 监听状态变化：用componentDidUpdate检测上传状态的变化，避免在handleSubmit中直接显示notification（因为上传是异步的，此时结果还未返回）。
• 动态生成描述文本：通过遍历successFiles和failedFiles数组，拼接成你需要的纯文本格式，直接赋值给notification的description字段。

这样就能实现你想要的效果：弹窗里清晰展示哪些文件上传成功，哪些失败啦！

内容的提问来源于stack exchange，提问作者B--rian