我正在尝试将一个文件上传到一个目录中,我正在使用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和您的代码的理解而言)是一个单一的文件(即
[0]
),而不是一个文件数组其思想是传递一个文件数组,我想可以通过以下方式实现:
formData.append("files", this.$refs.fileAdd.files);
或formData.append("files", [this.$refs.fileAdd.files[0]]);
一个类似的问题已经被提出和回答,所以可能值得一看 How can I upload multiple files using JavaScript and FastAPI?
相关问题 更多 >
编程相关推荐