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;

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

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传递给减速器。在化简器中，您可以从projectReport创建一个新的fileDetails对象，其中将包含必要的字段。

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

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

1 个答案: