Question

如何从类型文件的输入中获取数据并在reactjs中使用axios发送数据？我发现了一些有关formData的信息，但没有发现有关从输入获取数据并使用axios发送数据的任何信息。谢谢。

Answer 1

让我们假设您拥有所有输入数据以及文件的状态，例如

constructor(props) {
    super(props);
    this.state = {
        file : someName.txt,  // file input
        stateName : 'MP'      // Text Input
        date : 07/08/2018     // Date input
    }
}

现在，在您的handelSubmit方法中构造一个JSON对象

handelSubmit = () => {
    const { file, stateName, date } = this.state;
    let data = [];
    data['file'] = file;
    data['stateName'] = stateName;
    data['date'] = date;

    // a function which makes a axios call to API.
    uploadFile(data, (response) => {
        // your code after API response
    }); 
}

这是通过axios进行API调用的功能

uploadFile(data, callback) {
    const url = '';         // url to make a request
    const request = axios.post(url, data);
    request.then((response) => callback(response));
    request.catch((err) => callback(err.response));
}

已更新：

“更改时输入文字以设置状态”

handelOnChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

上传文件以进入状态的方法

handelOnUploadFile = (event) => {
    this.setState({
      file : event.target.files
    })
}

这是一个JSX代码。

render() {
    return(
        <div>
            <input type="file" onChange={this.handelOnUploadFile} />  {/* input tag which to upload file */}
            <input type="text" name="stateName" onChange={this.handelOnChange} />  {/* text input tag */}
            <button type="submit" onClick={this.handelSubmit}> UPLOAD </button>
        </div>
    )
}

希望它对您有帮助。

在React.js中使用axios上传和发送数据

1 个答案: