2

我想显示上传状态的通知。我接手了一个 React 和 ASP.NET 项目，我对此比较陌生。这个问题很简单，但我正在努力解决它：如何显示一个弹出通知，显示哪些文件已成功上传，哪些没有？ 

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);
    }
    handleSubmit = (e) => {
        message.config({ top: 0 });
        message.loading('Importing in progress...', 3);
        e.preventDefault();
        this.props.uploadFile(this.props.form.getFieldsValue());
          notification["info"]({
          message: 'Files successfully uploaded',
          description: '', // <-- this line has to be modified
          duration: 10
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem label="File" >
                    {getFieldDecorator('upload', {
                        valuePropName: 'fileList',
                        getValueFromEvent: (e) => e.fileList.slice(-1)
                    })(
                        <Upload name="importFile" action={' '} multiple={false}>
                            <Button> Upload </Button>
                        </Upload>
                        )}
                </FormItem>
                <Button type="primary" htmlType="submit">Import</Button>
            </Form>
        );
    }
}
export default Form.create()(UploadFileForm);

更具体地说：我如何修改该行description: '',以向我显示所有上传文件的列表及其纯文本状态，例如File(s) '1.txt', '2.txt', and '3.txt' have been successfully uploaded. File(s) '4.txt' failed.？

项目文档说我们正在使用 Redux-Saga，但我不是这样，也许这会让故事变得更容易。

4

1 回答 1

1

我想你的this.props.uploadFile方法是promise这样的，考虑到一旦promise解决了你就应该显示通知

this.props.uploadFile(this.props.form.getFieldsValue()).then(result => {
    // since your client doesn't know which ones are success/failed, server should return
    // this information when request is finished

   const { successUploads, failUploads } = result;

    notification["info"]({
        message: 'Files successfully uploaded',
        description: `File(s) ${successUploads.join(', ')} have been successfully uploaded. File(s) ${failUploads.join(', ')} failed.`
        duration: 10
     });
});

如果您无法控制从服务器返回的内容，那么您需要在客户端跟踪上传，但这意味着有多个上传（请求）到服务器，并且您的上传方法看起来像这样：

async function uploadFiles(files) {
    // I've called your server upload uploadService.send(), but replace this with your method
    const results = await Promise.all(
        files.map(file => uploadService.send(file))
             .map(p => p.catch(e => e)
    );

    let successUploads = [];
    let failUploads = [];
    results.forEach((result, idx) => {
        const file = files[idx];
        if (result instanceof Error) {
            failUploads.push(file);
        } else {
            successUploads.push(file);
        }
    });

    return {
        successUploads,
        failUploads
    }
}

然后您可以调用uploadFiles与第一个片段中所示相同的方式。

于 2019-09-11T09:55:31.043 回答