javascript - 有什么简单的方法可以在 REACT 的“表单”中包含文件并将其发送回 Express NodeJs？

Question

因此，我尝试使用“附加”表单数据方法在表单中单独添加键/对值并将其发送回 Express 服务器，它工作正常。我的问题是，是否可以像传递给 express 的任何其他字段一样将文件发送回 express 服务器。例如，当我在表单中不包含文件时，我可以简单地将“状态”传递给请求消息的正文，但是当包含文件时，我必须使用 form-data append 方法附加每个状态. 我正在使用状态（类组件）来存储文件。以下是代码：

顺便说一句，我正在使用 multer 来解析文件。

形式

<Form onSubmit={this.handleInputUser} encType="multipart/form-data">
                            <FormGroup>
                                <Label for="name">Name</Label>
                                <Input required id="name" value={this.state.name} onChange={this.handleInputChange} name="name" placeholder="Enter Name" />
                            </FormGroup>
                            <FormGroup>
                                <Label for="desig">Designation</Label>
                                <Input required id="desig" value={this.state.desig} onChange={this.handleInputChange} name="desig" placeholder="Enter Designation" />
                            </FormGroup>
                            <FormGroup>
                                <Label for="image">Image(png/jpeg/jpg)</Label>
                                <Input required id="image" name="userImage" onChange={this.handleFile} type="file" />
                            </FormGroup>
                            <FormGroup>
                                <Button size="lg" type="submit" color="primary">Post</Button>
                            </FormGroup>
                        </Form>

这是类组件

class Home extends Component {
constructor(props) {
    super(props);
    this.state = {
        msg: "empty",
        modal: false,
        name: "",
        desig: "",
        image: null
    };
    this.getMsg = this.getMsg.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
    this.handleInputUser = this.handleInputUser.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleFile = this.handleFile.bind(this);
};

getMsg() {
    fetch(baseUrl + 'msg')
        .then((res) => res.json())
        .then((res) => this.setState({ msg: res.msg }));
    console.log("Clicked");
}

toggleModal() {
    this.setState({
        modal: !this.state.modal
    });
}

handleInputUser(event) {
    console.log(this.state)
    var data = new FormData(); // form data
    data.append('name', this.state.name);
    data.append('desig', this.state.desig);
    data.append('userImage', this.state.image);

    fetch(baseUrl + 'users', {
        method: "POST",
        body: data
    })
        .then((res) => res.json())
        .then((res) => console.log("Submitted: ", res));

    this.toggleModal();
};

handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;
    this.setState({
        [name]: value
    });
};

handleFile(event) {
    const target = event.target;
    const value = target.files[0];
    this.setState({
        image: value
    });
}

标签： javascriptreactjsformsmulter

Answer 1

一种可能性是让输入自我控制，即不通过 React 状态控制它们的值，然后将表单传递给 FormData 构造函数。

<Form onSubmit={this.handleInputUser} encType="multipart/form-data">
      <FormGroup>
           <Label for="name">Name</Label>
           <Input required id="name" name="name" placeholder="Enter Name" />
      </FormGroup>
      <FormGroup>
           <Label for="desig">Designation</Label>
           <Input required id="desig" name="desig" placeholder="Enter Designation" />
      </FormGroup>
      <FormGroup>
           <Label for="image">Image(png/jpeg/jpg)</Label>
           <Input required id="image" name="userImage" type="file" />
      </FormGroup>
      <FormGroup>
           <Button size="lg" type="submit" color="primary">Post</Button>
      </FormGroup>
</Form>

handleInputUser(event) {
    console.log(this.state)
    var form = event.currentTarget;
    var data = new FormData(form); //pass the form to FormData

    fetch(baseUrl + 'users', {
        method: "POST",
        body: data
    })
        .then((res) => res.json())
        .then((res) => console.log("Submitted: ", res));

    this.toggleModal();
};