python - 如何使用 fastapi 和 vue 上传文件?我收到错误无法处理 422
问题描述
我正在尝试将文件上传到目录中,我在 Python 中使用 vue.js 和 fastapi。
但每次我得到一个错误 422 无法处理的功能。
我尝试像这样使用官方文档:
<!-- Vue Template -->
<input
style="display: none"
type="file"
name="files"
ref="fileAdd"
v-on:change="handleFilesChange()"
/>
// Vue Script
handleFilesChange() {
var uploadedFiles = this.$refs.fileAdd.files;
if (uploadedFiles.length > 0) {
for (var i = 0; i < uploadedFiles.length; i++) {
this.files.push(uploadedFiles[i]);
var formData = new FormData();
formData.append("files", this.$refs.fileAdd.files[0]);
axios
.post(url + "/uploadfile", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
onUploadProgress: (uploadStatus) => {
this.uploadProgress = Math.round(
(uploadStatus.loaded / uploadStatus.total) * 100
);
this.isUplading = true;
},
})
.then((response) => {do something}
}
}
}
# FastAPI endpoint
@app.post('/uploadfile')
async def upload_file(sid: str, files: List[UploadFile]=File(...)):
print(files)
if(files == []):
print("No Files")
else:
print(files[0].filename)
#...do something
我得到错误 422 无法处理。
知道如何解决这个问题吗?
解决方案
我不是 vuejs 专家(也不是 javascript),但我认为问题在于您传递给 axios 的内容:
formData.append("files", this.$refs.fileAdd.files[0]);
使用上面的行,您(就我对 vuejs 和您的代码的理解而言)是一个文件(the [0]
)而不是一个文件数组。
这个想法是传递一个文件数组,我猜这可以实现如下:
formData.append("files", this.$refs.fileAdd.files);
或者
formData.append("files", [this.$refs.fileAdd.files[0]]);
已经提出并回答了类似的问题,因此可能值得一看 如何使用 JavaScript 和 FastAPI 上传多个文件?
推荐阅读
- r - 这个怎么解决??[<-.data.frame 中的错误:新列将在现有列之后留下孔
- python - 如何更改子图大小并减少子图之间的空间?
- django - post to django API 在经过身份验证时返回 403 (Forbidden),但在未经过身份验证时可以发布
- android - 当我使用 SMS User Consent API 时 FirebasePhoneAuth 崩溃
- javascript - React Navigation - 返回另一个导航器中的屏幕
- linux - ext4 目录条目如何存储在 i 节点中?
- regex - 在循环中选择第一个出现的数字的正则表达式
- javascript - 如何从 url 获取坐标值
- perl - 在模式匹配中使用未初始化的值 $elements[6] (m//)
- elasticsearch - 是否建议使用 Elastic Search 作为应用程序的权威数据存储?