python - ReactJS 获取 POST 文件到 Flask 后端(不会发送数据)
问题描述
我已经阅读了很多关于 fetch 和 ReactJS 的文档,但我根本找不到我的代码的问题,情况是我可以选择并存储所需的文件状态但是当我发送提交时,Flask 没有收到该文件,只是这条消息:
127.0.0.1 - - [08/May/2020 18:50:44] “POST /上传 HTTP/1.1”200 -
这是我的 ReactJS 代码:
import React from 'react';
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
file: null,
brand: null
};
this.handleFile = this.handleFile.bind(this);
this.handleBrand = this.handleBrand.bind(this);
this.handleUpload = this.handleUpload.bind(this);
}
handleBrand(e) {
let brand = e.target.value
this.setState({brand: brand});
}
handleFile(e){
let file = e.target.files
this.setState({file: file})
console.log(file)
}
handleUpload(e){
e.preventDefault();
const data = new FormData();
data.append('file', this.state.file);
console.log(this.state.file)
fetch('http://localhost:5000/upload', {
method: 'POST',
body: data,
})
}
render() {
return (
<form onSubmit={this.handleUpload}>
<div>
<input onChange={this.handleFile} id="fileToUpload" type="file" name="filesToUpload" id="filesToUpload"/>
</div>
<div>
<select value={this.state.value} onChange={this.handleBrand}>
<option value="">- Please select -</option>
<option value="toyota">Toyota</option>
<option value="quick_lanes">Quick Lanes</option>
<option value="volvo">Volvo</option>
<option value="alfa_romeo">Alfa Romeo</option>
</select>
</div>
<br />
<div>
<button>Upload</button>
</div>
</form>
);
}
}
export default Main;
这是我的 Flask 代码:
from flask import *
from flask_cors import *
import os
app = Flask(__name__)
CORS(app)
UPLOAD_FOLDER = "C:/projects/poi_dealers/files"
app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
@app.route("/upload", methods=["GET", "POST"])
def upload_image():
if request.method == "POST":
if request.files:
filesToUpload = request.files["file"]
filesToUpload.save(os.path.join(app.config["UPLOAD_FOLDER"], filesToUpload.filename))
print(filesToUpload)
return redirect(request.url)
return "All ok"
if __name__ == "__main__":
app.secret_key = os.urandom(24)
app.run(debug=True, host="0.0.0.0", use_reloader=False)
事情是这样的,我在网上找到了这段代码,它可以工作!我不明白为什么,我已经从上到下阅读了它,我看不到差异,我不想使用这段代码我想了解发生了什么,有什么建议吗?这是我找到的代码:
import React from 'react';
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
imageURL: '',
};
this.handleUploadImage = this.handleUploadImage.bind(this);
}
handleUploadImage(ev) {
ev.preventDefault();
const data = new FormData();
data.append('file', this.uploadInput.files[0]);
data.append('filename', this.fileName.value);
fetch('http://localhost:5000/upload', {
method: 'POST',
body: data,
}).then((response) => {
response.json().then((body) => {
this.setState({ imageURL: `http://localhost:5000/${body.file}` });
});
});
}
render() {
return (
<form onSubmit={this.handleUploadImage}>
<div>
<input ref={(ref) => { this.uploadInput = ref; }} type="file" />
</div>
<div>
<input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
</div>
<br />
<div>
<button>Upload</button>
</div>
<img src={this.state.imageURL} alt="img" />
</form>
);
}
}
export default Main;
这是python终端中的输出(当然,它正确保存了文件,'competitive_process.py'是我用于测试目的的文件的名称):
<FileStorage: 'competitive_process.py' ('text/plain')>
127.0.0.1 - - [08/May/2020 18:39:09] "POST /upload HTTP/1.1" 302 -
127.0.0.1 - - [08/May/2020 18:39:09] "GET /upload HTTP/1.1" 200 -
PS:幸运的是,没有 CORS 错误,我检查了三次
问候 !
解决方案
我看不到您在构造函数中为文件输入创建引用的任何地方。
你在某个地方的构造函数中有这个吗?
this.uploadInput = React.createRef();
另外,您在哪里声明/初始化this.uploadInput
?我在某个地方想念那个吗?
推荐阅读
- python - 为什么在终端中内联打印转义的十六进制字符和在运行终端的程序中存在差异?
- security - 如果我的数据库是公开的,会发生什么?
- reactjs - Material-ui 菜单项链接周围有蓝色标记
- java - wait() 不会释放所有当前的锁,它是如何做到的?
- json - SPFx 上传和添加附件到列表
- javascript - JS | 将 arrayBuffer 转换为 Uint8ClampedArray 的问题
- python - 是否有支持 MQTT 和 Mosquitto 的免费 python 服务器
- c++ - 这个 noexcept 声明有效吗?
- python - IndexError:数组python numpy中的索引太多
- python - 根据其他数据框中的值有条件地替换行