需要在文件上传组件中添加一个输入字段

Question

我有一个component，其中我们有file upload 设施。我需要添加一个额外的input filed，所以当用户点击upload 按钮时，one input filed and one file 应该发送到server。 因为它的class component 我无法使用hook。其遗留应用程序。

import axios from 'axios';

import React,{Component} from 'react';

class App extends Component {

    state = {

    // Initially, no file is selected
    selectedFile: null
    };
    
    // On file select (from the pop up)
    onFileChange = event => {
    
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
    
    };
    
    // On file upload (click the upload button)
    onFileUpload = () => {
    
    // Create an object of formData
    const formData = new FormData();
    
    // Update the formData object
    formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
    );
    
    // Details of the uploaded file
    console.log(this.state.selectedFile);
    
    // Request made to the backend api
    // Send formData object
    axios.post("api/uploadfile", formData);
    };
    
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
    
    if (this.state.selectedFile) {
        
        return (
        <div>
            <h2>File Details:</h2>
            
<p>File Name: {this.state.selectedFile.name}</p>

            
<p>File Type: {this.state.selectedFile.type}</p>

            
<p>
            Last Modified:{" "}
            {this.state.selectedFile.lastModifiedDate.toDateString()}
            </p>

        </div>
        );
    } else {
        return (
        <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
        </div>
        );
    }
    };
    
    render() {
    
    return (
        <div>
            <h3>
            File Upload using React!
            </h3>
            <div>
                <input type="file" onChange={this.onFileChange} />
                <button onClick={this.onFileUpload}>
                Upload!
                </button>
            </div>
        {this.fileData()}
        </div>
    );
    }
}

export default App;

我尝试了很多，但它无法正常工作。如果你需要我可以把修改后的代码。因为它很乱，我只放了没有输入字段的工作代码。 请您帮我添加一个input 字段好吗？

Edit 1

修改后的代码

import React from 'react';
import axios from 'axios';

class FileUpload extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedFile: '',
      countryCode: '',
      responseArray: [],
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInputChange(event) {
    this.setState({
      selectedFile: event.target.value,
      responseArray: [],
    });
  }

  handleInput(event) {
    this.setState({
      countryCode: event.target.value,
    });
  }

  handleSubmit() {
    if (!this.state.selectedFile) {
      alert('Please select The file');
      return false;
    }
    if (!this.state.countryCode) {
      alert('Please select The Country Code');
      return false;
    }
    const data = new FormData();

    for (let i = 0; i < this.state.selectedFile.length; i++) {
      data.append('file', this.state.selectedFile[i]);
    }
    data.append('countryCode', this.state.countryCode);
    console.log(data.countryCode);

    let url = process.env.API_URL;

    axios.post('http://localhost:8080/file_upload', data, {}).then(
      (res) => {
        console.log(data);
        // this.setState({ responseArray: res.data });
        // this.resetFile();
      },
      (error) => {
        alert(error);
      }
    );
  }

  resetFile() {
    document.getElementsByName('file')[0].value = null;
  }

  render() {
    return (
      <form>
        <div className="row">
          <div className="col-md-12">
            <h1>Translation File Upload</h1>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Please enter the country code</label>
                <input
                  type="text"
                  value={this.state.countryCode}
                  onChange={this.handleInput}
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Select File :</label>
                <input
                  type="file"
                  className="form-control"
                  multiple
                  name="file"
                  onChange={this.handleInputChange}
                  required
                />
                <hr />
              </div>
            </div>
            <br />
            <div className="form-row">
              <div className="col-md-6">
                <button onClick={this.handleSubmit.bind(this)}>Upload </button>
              </div>
            </div>
            <br />
          </div>
        </div>
      </form>
    );
  }
}

export default FileUpload;

Answer 1

你可以试试

<h3>
File Upload using React!
</h3>
<div>
  <input type="file" onChange={this.onFileChange} />
  <button onClick={this.onFileUpload}>
     Upload!
  </button>
  <input type="text" onChange={this.onInputChange} required>
</div>

然后在你的代码中

inputField: ''

onInputChange = event => {

// Update the state
this.setState({ inputField: event.target.value });

};

// in the formData part
formData.append(
    "inputField",
    this.state.inputField
);