如何将上传的值存储到redux store

Question

您好，我正在为设计页面使用 react、redux 和 ant design 上传文件。我能够成功地将选定的文件发送到后端并且还能够存储到数据库中。现在作为响应，我返回了一些我需要存储在 redux 存储中的文件元数据。

现在的问题是，当我转到下一页并返回上一页时，我正在调用 redux 将完整的表单字段存储到 redux 存储中。 所以现在对于我的上传文件，它会更新一些内容文件和文件列表的对象，而不是我想保存我从后端返回的响应元数据。

我试图用响应元数据分配我的上传字段，但是当我来回移动它时，它会被一些内容文件和文件列表的对象覆盖。 所以我无法弄清楚我在做什么错。谁能帮我解决这些问题

A.js 文件：

import React, { Component } from 'react'
import uploadFile from './B'
import { Button, Form, Icon, Upload } from "antd";


export class A extends Component {
    uploadFileHandler = ({ file, onSuccess }) => {
        uploadFile(file, onSuccess).then(data => {
            this.props.updateProjectReport({
                projectReport: data
            });
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form.Item>
                <br />
                {getFieldDecorator("projectReport", {
                    initialValue: this.props.project.projectReport
                })(
                    <Upload name="file" customRequest={this.uploadFileHandler}>
                        <Button>
                            <Icon type="upload" /> Click to Upload
                        </Button>
                    </Upload>
                )}
            </Form.Item>
        )
    }
}

export default A

B.js 文件：

import axios from "axios";

const uploadFile = (props, onSuccess) => {
    let fileDetails;
    console.log("upload file call");
    const data = new FormData();
    data.append("fileName", props);
    const config = {
      headers: {
        "content-type":
          "multipart/form-data; boundary=----WebKitFormBoundaryqTqJIxvkWFYqvP5s"
      }
    };
    return axios
      .post("http://localhost:8080/upload", data, config)
      .then(resp => {
        if (resp.status === 200) {
          setTimeout(() => {
            onSuccess("ok");
          }, 0);
          fileDetails = resp.data;
          console.log(fileDetails);
              return fileDetails;
        }
      })
      .catch(error => {
        console.log(error);
      });
  };

export default uploadFile;

这是我在reducer中来回移动时保存的数据。

projectReport: {
        file: {
          uid: 'rc-upload-1567617261814-3',
          lastModified: 1565243029823,
          lastModifiedDate: '2019-08-08T05:43:49.823Z',
          name: 'rose-blue-flower-rose-blooms-67636.jpeg',
          size: 20775,
          type: 'image/jpeg',
          percent: 0,
          originFileObj: {
            uid: 'rc-upload-1567617261814-3'
          },
          status: 'done',
          response: 'ok'
        },
        fileList: [
          {
            uid: 'rc-upload-1567617261814-3',
            lastModified: 1565243029823,
            lastModifiedDate: '2019-08-08T05:43:49.823Z',
            name: 'rose-blue-flower-rose-blooms-67636.jpeg',
            size: 20775,
            type: 'image/jpeg',
            percent: 0,
            originFileObj: {
              uid: 'rc-upload-1567617261814-3'
            },
            status: 'done',
            response: 'ok'
          }
        ]
      }

预计 Json 将被存储：

projectReport: {
        fileName: "rose-blue-flower-rose-blooms-67636.jpeg", 
        fileDownLoadUri: "http://localhost:8080/downloadFile/rose-blue-flower-rose-blooms-67636.jpeg", 
        fileContentType: "image/jpeg", 
        fileSize: 20775
      }

Answer 1

您的uploadFileHandler 方法应该调用一个动作，该动作将依次调用B.js 中的uploadFile 方法和dispatch 的结果fileDetails 到reducer。在 reducer 中，您可以从 fileDetails 创建一个新的 projectReport 对象，该对象将包含必要的字段。

projectReport: {
    fileName: fileDetails.file.name, 
    fileDownLoadUri: SERVER_PATH +fileDetails.file.name", 
    fileContentType: fileDetails.file.type, 
    fileSize: fileDetails.file.size
  }