如何使用JavaScript和FastAPI上传多个文件?
我遵循了FastAPI文档,并试图将用js编写的客户端文件发送到用FastAPI编写的服务器 我的HTML:如何使用JavaScript和FastAPI上传多个文件?,javascript,fastapi,Javascript,Fastapi,我遵循了FastAPI文档,并试图将用js编写的客户端文件发送到用FastAPI编写的服务器 我的HTML: <html> <head> <script src="https://code.jquery.com/jquery-2.0.3.js" integrity="sha256-lCf+LfUffUxr81+W0ZFpcU0LQyuZ3Bj0F2DQNCxTgSI=" crossorigin=&quo
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.js" integrity="sha256-lCf+LfUffUxr81+W0ZFpcU0LQyuZ3Bj0F2DQNCxTgSI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<input id='fileid' type='file' value="Load miRNA data"/>
<input id='fileid2' type='file' value="Load Target data"/>
<input id='buttonid' type='button' value='Upload' />
</body>
<script type="text/javascript" src="./uplaodfiles.js"></script>
</html>
action.py
from typing import List
from fastapi import APIRouter,Header,HTTPException,FastAPI, File, UploadFile
router = APIRouter()
import pandas as pd
@router.post('/upload')
def upload_file(files: List[UploadFile] = File(...)):
print('Arrived')
无法成功获取文件,服务器端出现错误:
INFO: 127.0.0.1:59210 - "POST /actions/upload HTTP/1.1" 422 Unprocessable Entity
客户:
Uncaught (in promise) Error: Request failed with status code 422
at e.exports (isAxiosError.js:10)
at e.exports (isAxiosError.js:10)
at XMLHttpRequest.l.onreadystatechange (isAxiosError.js:10)
我如何解决这个问题,以及如何使用我在上载端点中收到的那些文件?问题可能是因为当端点需要一个名为
文件的列表时,您传递了参数文件1
和文件2
我没有测试代码,但是基本的想法是使用实际文件创建一个数组,并将其添加到FormData
下的files
名称下。下面的代码应该给你如何实现你的目标的想法
let formData = new FormData();
formData.append("files",[file, file2]);
或者,如果我的解决方案不起作用,您可以尝试使用此解决方案,但同样,我的答案主要是引导您找到正确的路径。问题可能是因为当端点需要名为文件的列表时,您传递了参数file1
和file2
我没有测试代码,但是基本的想法是使用实际文件创建一个数组,并将其添加到FormData
下的files
名称下。下面的代码应该给你如何实现你的目标的想法
let formData = new FormData();
formData.append("files",[file, file2]);
或者,如果我的解决方案不起作用,您可以尝试使用此解决方案,但同样,我的答案主要是引导您走上正确的道路