如何在 fastAPI 中为 <input type="file"> 定义 REST 端点（并使其与 angular 一起工作）？

Question

我正在做这个 angular tutorial。我正在尝试使用 python fastAPI 创建一个后端端点，它通过 HttpClient POST 接收数据，但我正在努力这样做。 (angular 13.0.2，python 3.7，fastapi 0.70.0)

html模板代码：

<input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload> 

<div class="file-upload">

    {{fileName || "No file uploaded yet."}}

    <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

对应组件ts代码：

  onFileSelected(event) {

    const file: File = event.target.files[0]
    console.log(`onFileSelected(${file.name})`)

    if (file) {
      this.fileName = file.name;
      const formData = new FormData();
      formData.append("thumbnail", file);
      const upload$ = this.http.post("http://localhost:8000/thumbnail-upload", formData);
      upload$.subscribe();
      console.log("upload done?")
  }

fastapi 代码： 灵感来自 this

@app.post("/thumbnail-upload")
def create_file(file: UploadFile = File(...)):
    print(file)
    return {"file_size": len(file)}

似乎正在进行一些正常的通信，但我被困在这里：

uvicorn 服务器的输出：

←[32mINFO←[0m:     127.0.0.1:18231 - "←[1mPOST /thumbnail-upload   HTTP/1.1←[0m" ←[31m422 Unprocessable Entity←[0m

浏览器调试控制台输出：

zone.js:2863 POST http://localhost:8000/thumbnail-upload 422 (Unprocessable Entity)
core.mjs:6495 ERROR HttpErrorResponse {headers: HttpHeaders, status: 422, statusText: 'Unprocessable Entity', url: 'http://localhost:8000/thumbnail-upload', ok: false, …}

我需要如何实施 fastAPI 端点才能获得此运行？免责声明：我是 angular/fastapi 的新手，如果我忘记包含必要的信息，请。告诉我缺少什么 ;)

Answer 1

422 错误消息的正文会告诉您到底缺少什么字段。从您的代码看来，您正在以 thumbnail 名称提交文件，但您在 FastAPI 路由中使用的是 file 名称。由于这两个不匹配，FastAPI 找不到您假定存在的文件。将表单参数重命名为 file 或将 FastAPI 参数重命名为 thumbnail:

@app.post("/thumbnail-upload")
def create_file(thumbnail: UploadFile = File(...)):
    print(thumbnail)
    return {"file_size": len(thumbnail.file.read())}

UploadFile 对象还公开了 file 以便在后台与假脱机文件进行交互。因为它不会直接给你字节，我认为调用 len 不会做你期望的事情。

如何在 fastAPI 中为 <input type="file"> 定义 REST 端点（并使其与 angular 一起工作）？

How to define a REST endpoint in fastAPI for <input type="file"> (and make it work with angular)?

angular

file-upload

fastapi