我正在尝试将一个文件从JS前端发送到Flask后端。 但我的烧瓶后端似乎没有收到任何文件。 当进入flask后端HTML页面并手动提交时,它可以工作,但我希望前端将文件发送到后端
下面是有问题的javascript:
function send() {
const formData = new FormData();
const files = document.getElementById("file");
formData.append("file", files.files[0]);
const requestOptions = {
headers: {
"Content-Type": "multipart/form-data",
},
mode: "no-cors",
method: "POST",
files: files.files[0],
body: formData,
};
console.log(requestOptions);
fetch("http://localhost:5000/upload", requestOptions).then(
(response) => {
console.log(response.data);
}
);
}
export default function App() {
return (
<div className="App" id="App">
<header className="App-header">
<Button variant="outlined" component="label" size="large">
Load Audio
<input
id="file"
type="file"
onChange={send}
hidden
/>
</Button>
</header>
</div>
);
}
下面是处理传入请求的flask python脚本:
@app.route("/upload", methods=["GET", "POST"])
def upload():
if request.method == 'POST':
if 'file' not in request.files:
print(1)
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
print(2)
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
print(3)
filename = secure_filename(file.filename)
session["id"] = filename
file.save(os.path.join('UPLOAD', filename))
return redirect(url_for('uploaded',
filename=filename))
return render_template('upload.html')
它打印1,因此找不到文件
如果有用,这里有一个print(request.headers)
调试:
Host: localhost:5000
Connection: keep-alive
Content-Length: 412313
Sec-Ch-Ua: "Chromium";v="88", "Google Chrome";v="88", ";Not A Brand";v="99"
Sec-Ch-Ua-Mobile: ?0
Content-Type: multipart/form-data
Accept: */*
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
我在网上读了很多关于在这种情况下如何上传文件的文章,但我不能让它工作。 能有人帮忙就太好了
您在Flask中的文件处理似乎很正确。 但是,您指定
Content-Type
头的方式似乎不太清楚在运行简化的代码示例时,我尝试使用cURL以以下方式进行测试:
通过这种方式,Flask了解到一个文件已经上传,我可以在
request.files
中看到它:还引起我注意的是
Content-Type
具有指定的边界:这使我假设手动指定
Content-Type: multipart/form-data
似乎不起作用由于您正试图通过JS^ {}进行上传,请考虑查找here。他们也不建议手动设置标题
相关问题 更多 >
编程相关推荐