Question

react中有一种方法可以捕获输入元素的文件，以便我可以将其作为参数传递给其他函数。我正在尝试使用“选择文件”弹出窗口，在该窗口中，我将首先选择一个文件，然后需要从上载按钮onClick函数发送文件以进行api调用。

Answer 1

基本上，您需要在输入字段中添加引用，然后才能从该位置抓取文件以执行所需的任何功能。这篇简短的文章很好地解释了问题的前端部分。 https://levelup.gitconnected.com/file-upload-with-node-js-react-js-686e342ad7e7

Answer 2

我认为这是您想要的：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: null};
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    event.preventDefault();
    console.log("submitted file:", this.state.file);
  } 
  handleChange(event) {
    this.setState({file: event.target.files});
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
      <label>
          File:
          <input type="file" value="" onChange={this.handleChange} />
        </label>
       <input type="submit" value="Submit" />
      </form>
    );
  }
}

如何捕获输入元素的文件，以便我可以将其作为参数传递给react中的另一个函数

2 个答案: