400错误的请求:浏览器(或代理)发送了该服务器无法理解的请求。 KeyError:“文件”

问题描述 投票:0回答:1

我在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错误的请求:浏览器(或代理)发送了一个请求...

javascript python reactjs flask
1个回答
0
投票

当您尝试访问表单中不存在或未提交的部分时,烧瓶会返回此错误。如果在页面上没有选择文件,则将出现此错误。

© www.soinside.com 2019 - 2024. All rights reserved.