我是Python Flask的新手,我在后端使用Flask,在前端使用React JS,并在数据库中使用Pymongo。我想将文件从 ReactJs 上传到 Flask 服务器,在执行“第二个”方法时遇到错误,我该怎么做。下面是我尝试过的代码。
我尝试了两个例子,一个有效,另一个无效,我不知道为什么。
werkzeug.exceptions.BadRequestKeyError:400 错误请求:浏览器(或代理)发送了该服务器无法理解的请求。
KeyError:'文件'
- 直接将文件发送到 API。 案例1
Python代码
import os
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = '/path/to/the/uploads'
ALLOWED_EXTENSIONS = set([ 'png', 'jpg', 'jpeg'])
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/api/users/add_photo', methods=['POST', "GET"])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
# if user does not select file, browser also
# submit a empty part without filename
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
image = upload(open(filename, 'rb'))
user_id = user.insert({"file":image})
return jsonify({'result': "file Upload successfully!!!"})
onSubmitImage(e) {
let file = this.state.file;
let formData = new FormData();
formData.append("file", file);
this.props.imageUpload(formData);
}
上面的例子运行良好
- 将文件发送到对象中的 API。 案例2
Python代码
import os
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = '/path/to/the/uploads'
ALLOWED_EXTENSIONS = set([ 'png', 'jpg', 'jpeg'])
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/api/users/add_photo', methods=['POST', "GET"])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
name = request.get_json(force=True)["name"]
last_name = request.get_json(force=True)["last_name"]
email = request.get_json(force=True)["email"]
# if user does not select file, browser also
# submit a empty part without filename
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
image = upload(open(filename, 'rb'))
user_id = user.insert({"file":image,"name":name,"last_name":last_name,"email":email})
return jsonify({'result': "file Upload successfully!!!"})
onSubmitImage(e) {
let file = this.state.file;
let formData = new FormData();
formData.append("file", file);
const data = {
file: formData
name: this.state.name
last_name: this.state.last_name
email: this.state.last_name
};
this.props.imageUpload(data);
}
我不知道为什么第一个有效而第二个无效。我想实现第二个示例,因为还有其他数据,例如姓名、姓氏、带有图像文件的电子邮件。
最佳答案
您需要将数据添加到 FormData() - 即
let file = this.state.file;
let formData = new FormData();
formData.append("file", file);
formData.append("name", this.state.name);
formData.append("last_name", this.state.last_name)
formData.append("email", this.state.last_name)
this.props.imageUpload(formData);
关于javascript - Flask 和 ReactJS 文件上传不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60957369/