我在Flask中使用Reactjs。我从React上传文件到服务器时遇到错误,以下是错误以及我的flask和reactjs代码
400错误的请求:浏览器(或代理)发送了该服务器无法理解的请求。KeyError:“文件”
下面是我的烧瓶代码
Flask代码] >>
@app.route('/api/users/register_user', methods=['GET', 'POST']) def add_user(): if request.method == 'POST': user = mongo.db.users full_name = request.get_json( force=True)['full_name'] father_name = request.get_json( force=True)['father_name'] mother_name = request.get_json( force=True)['mother_name'] profile_photo = request.files['file'] if user.find({"full_name": full_name}).count() > 0: error = "User {} exist! Please try adding other characters".format( full_name) return jsonify({'result': error}) else: profile_photo.save(os.path.join(base_path, filename)) image = upload(open(filename, 'rb')) user_id = user.insert({'full_name': full_name, 'father_name': father_name, 'mother_name': mother_name,"profile_photo": image["url"]}) return jsonify({"result": "User {} succesfully Added".format(full_name)})
这里是反应代码
Reactjs
import React, { Component } from "react";
class Register extends Component {
constructor() {
super();
this.state = {
full_name: "",
father_name: "",
mother_name: "",
file: null
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onProfileChange = this.onProfileChange.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onProfileChange(e) {
const file = e.target.files[0];
this.setState({ file: file });
}
onSubmit(e) {
e.preventDefault();
// // single photo
const photo = this.state.file;
var formData = new FormData();
formData.append("file", photo);
const userData = {
full_name: this.state.full_name,
father_name: this.state.father_name,
mother_name: this.state._mother_name,
file: formData
};
const user = JSON.stringify(userData);
this.props.registeruser(user);
}
render() {
return (
<form onSubmit={this.onSubmit} class="needs-validation">
<div className="row">
<div className="col-md-3">
<div className="form-group">
<label for="billing-phone">
Full Name
<span className="text-danger">*</span>
</label>
<input
className="form-control"
type="text"
placeholder="Enter full Name"
required
name="full_name"
value={this.state.full_name}
onChange={this.onChange}
/>
</div>
</div>
<div className="col-md-3">
<div className="form-group">
<label for="billing-phone">
Father Name
<span className="text-danger">*</span>
</label>
<input
className="form-control"
type="text"
placeholder="Enter father Name"
required
name="father_name"
value={this.state.father_name}
onChange={this.onChange}
/>
</div>
</div>
<div className="col-md-3">
<div className="form-group">
<label for="billing-phone">
Mother Name
<span className="text-danger">*</span>
</label>
<input
className="form-control"
type="text"
placeholder="Enter Mohter Name"
required
name="mother_name"
value={this.state.mother_name}
onChange={this.onChange}
/>
</div>
</div>
<div className="col-md-3">
<div className="form-group">
<label>
Add Profile Photo
<span className="text-danger">*</span>
</label>
<div className="input-group mb-3">
<div className="custom-file">
<input
type="file"
autocomplete="off"
name="file"
onChange={this.onProfileChange}
/>
</div>
</div>
</div>
</div>
</div>
<div className="">
<div className="text-center">
<input
className="btn btn-lg font-16 btn-primary btn-block"
type="submit"
/>
</div>
</div>
</form>
);
}
}
Register.propTypes = {
registeruser: PropTypes.func.isRequired
};
export default connect(mapStateToProps, { registeruser })(withRouter(Register));
我在Flask中使用Reactjs。我在从React上传文件到服务器时遇到错误,这是错误,而我的flask和reactjs代码400错误的请求:浏览器(或代理)发送了一个请求...
当您尝试访问表单中不存在或未提交的部分时,烧瓶会返回此错误。如果在页面上没有选择文件,则将出现此错误。