如何使用Fastapi使用axios处理多个文件上传

Question

这是我的 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(...)):

处理单个文件上传