python - 如何使用Fastapi处理使用axios上传多个文件
问题描述
这是我的 HTML 文件:
<form id="uploadForm" enctype="multipart/form-data">
<input name="uploading_files" type="file" multiple><br><br>
<input id="btn" type="submit" value="Upload">
</form>
和 JavaScript:
async function ajax_post(e){
e.preventDefault();
let data = new FormData();
console.log(e.target[0].files);
data.append('files', e.target[0].files);
await axios.post("/uploadfiles", data, {
headers: {
"Content-Type": "multipart/form-data"
}
});
}
(function () {
console.log("Document Ready.");
document.getElementById("uploadForm").addEventListener("submit", ajax_post);
})();
最后是fastapi脚本:
@app.post("/uploadfiles")
async def catch_file(files: List[UploadFile] = File(...)):
print("="*126)
for file in files:
file_fullname = file.filename.split(".")
file_type = file_fullname[-1]
print(f"Filename: {file.filename}")
if len(file_fullname) > 1:
print(f"File type: {file_type}")
else:
print("File type: No File type inputed")
print("="*126)
但我不明白为什么我仍然在服务器显示INFO: 127.0.0.1:55302 - "POST /uploadfiles HTTP/1.1" 422 Unprocessable Entity
和浏览器上出现错误:
我遵循了 Fastapi 的文档,但仍然出现该错误,我在哪里做错了?
顺便说一句,我已经能够使用async def catch_file(files: UploadFile = File(...)):
解决方案
推荐阅读
- python - Matplotlib中的多个y轴嵌入pyqt
- amcharts - AmChart3 地理地图
- typescript - 为每个测试创建一个单独的(在内存中)数据库
- typescript - 使用 Ionic App 中的 STOMP 连接到 ActiveMQ 代理
- node.js - 我在这里做错了吗 node+express + vue SPA getCSRFTOKEN()
- html - 如何在 CSS 中突出显示单击的导航按钮?
- java - 设置方法在 Double 的 ArrayList 中不起作用以获得更高位
- microsoft-edge - 使用 OATS 在 IE 兼容模式下启动 Edge 浏览器
- vba - excel宏就消失了
- java - Java Talend 数据迁移冻结