处理多个图像提交反应

Question

我正在尝试使用multipart/form-data发布具有多个文本和图像字段的表单数据。但是，每次我提交数据时，图像都不会附加到最终数据中。从服务器取回响应数据后，它仅显示文本和其他选中的字段，但图像字段始终为null。另外，将每个图像字段分别附加在fileHandlerFunction()内似乎是模棱两可的。是否有一种方法可以缩短此逻辑？

class CreateChatTemplate extends Component{
    constructor(props) {
        super(props)

        this.state = {
            Data: {
                template_name: '',
                h_icon: null,
                m_welcome_msg: '',
                m_bg_icon: null,
                fs_attach_status: false
            },
        }
    }

        handleOptionChange = (e) => {
            const { templateData} = this.state;

            const chatTemplate = templateData;
            const input = e.target;
            const name = input.name;
            let value = input.type === 'checkbox' ? input.checked : input.value;
            chatTemplate[name] = value;

            this.setState({
                templateData: chatTemplate
            });
        }

        fileChangedHandler = (e) => {
            this.setState({ 
                h_icon: e.target.files[0],
                m_bg_icon: e.target.files[0] 
            });
        }


      handleFormSubmit = (e) => {
        e.preventDefault();

        let Data = this.state.Data;

        let form_data = new FormData();

        for ( var key in Data ) {
            form_data.append(key, Data[key]);
        }

        console.log(...form_data)

        // const headers = {
        //     'Content-Type': 'multipart/form-data',
        //     'x-access-token': LocalData.getLocalData('currentUser', 'getToken')
        // }

        // axios.post(GlobalInfo.URL, form_data, {headers})
        // .then(res => {
        //     console.log('response data : ',res.data);
        // })
        // .catch(err => {
        //     console.log(err);
        // });
      }

      goback = () => {
          this.props.history.goBack();
      }


    render(){
        const { template_name, m_welcome_msg, fs_attach_status } = this.state.Data;

        return(
            <Card>
                <CardBody>
                <Row>
                <Col sm="12" xs="12" lg="12">
                    <Form onSubmit={this.handleFormSubmit}>
                        <Row>
                            <Col style={{marginBottom: 25}}>
                                <Label>Template Name</Label>
                                <Input type="text" placeholder="Enter template name" required name="template_name" value={template_name} onChange={this.handleOptionChange} />
                            </Col>
                        </Row>

                        {/* header section */}
                    <fieldset className="fieldset_body">
                            <FormGroup>
                                    <Col sm="12" xs="12" lg="6">
                                    <Label>Icon</Label>
                                        <Input type="file" name="h_icon" onChange={this.fileChangedHandler} />
                                    </Col>
                                </Row>                                
                            </FormGroup>
                        </fieldset>


                            <FormGroup>
                                <Row>
                                    <Col sm="12" xs="12" lg="6">
                                        <Label>Welcome Msg</Label>
                                        <Input type="text" placeholder="Enter welcome message" required name="m_welcome_msg" value={m_welcome_msg} onChange={this.handleOptionChange} />
                                    </Col>
                                    <Col sm="12" xs="12" lg="6">
                                        <Label>Background Image</Label>
                                        <Input type="file" name="m_bg_icon" onChange={this.fileChangedHandler} />
                                    </Col>
                                </Row>                                
                            </FormGroup>


                                <FormGroup check>
                            <Input name="fs_attach_status" type="checkbox" required checked={fs_attach_status} onChange={this.handleOptionChange} />
                            <Label>Attachment?</Label>
                        </FormGroup>
                            </div>
                            </fieldset>
                        </fieldset>

                        <div className="template-btn">
                            <Button color="primary">Save</Button>
                            <Button color="danger" onClick={this.goback}>Cancel</Button>
                        </div>

                    </Form>
                </Col>
            </Row>
            </CardBody>
        </Card>

        )
    }
}

export default withRouter(CreateChatTemplate);

请帮助解决该问题。