将单张图片从 axios 上传到 FastAPI："Expected UploadFile, received: <class 'str'>"

Question

我尝试使用 axios 从我的 react-admin 应用程序将图像上传到 FastAPI。我将 ImageInput 组件 returns a File object 转换为 Blob 并尝试使用 axios.
上传我使用的 API 客户端是由 orval.

生成的

发送 POST 后收到的回复：

{
    "detail":[
        {
            "loc":[
                "body",
                "file"
            ],
            "msg":"Expected UploadFile, received: <class 'str'>",
            "type":"value_error"
        }
    ]
}

axios请求函数：

/**
 * @summary Create Image
 */
export const createImage = (
  bodyCreateImageImagesPost: BodyCreateImageImagesPost,
  options?: AxiosRequestConfig
): Promise<AxiosResponse<Image>> => {
  const formData = new FormData();
  formData.append(
    "classified_id",
    bodyCreateImageImagesPost.classified_id.toString()
  );
  formData.append("file", bodyCreateImageImagesPost.file);

  return axios.post(`/images`, formData, options);
};

axios 请求 headers:

POST /images HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: application/json, text/plain, */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Authorization: bearer xxx
Content-Type: multipart/form-data; boundary=---------------------------41197619542060894471320873154
Content-Length: 305
Origin: http://localhost:3000
DNT: 1
Connection: keep-alive
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1

请求数据object:

{
  "classified_id": 2,
  "file": {
    "rawFile": {...},
    "src": "blob:http://localhost:3000/9826efb4-875d-42f9-9554-49a6b13204be",
    "name": "Screenshot_2019-10-16-18-04-03.png"
  }
}

快速API端点：

def create_image(
    classified_id: int = Form(...),
    file: UploadFile = File(...),
    db: Session = Depends(get_db),
    user: User = Security(manager, scopes=["images_create"]),
) -> Any:
    # ...

在浏览器的开发人员工具的“网络”部分，它显示 file 字段为 [object Object] 但我想这只是 [=21 没有字符串表示形式的问题=]?

当我尝试通过 Swagger UI 上传图片时，它按预期工作并且 curl 请求如下所示：

curl -X 'POST' \
  'http://localhost:8000/images' \
  -H 'accept: application/json' \
  -H 'content-length: 3099363' \
  -H 'Authorization: Bearer xxx' \
  -H 'Content-Type: multipart/form-data' \
  -F 'classified_id=2' \
  -F 'file=@Screenshot_2019-10-16-18-04-03.png;type=image/png'

知道这里有什么问题吗？正确的 axios 请求应该是什么样的？

Answer 1

使用如下（记得根据您的 FastAPI 端点更改 url，以及 Accept header）：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script type="text/javascript">
function uploadFile() {
    var formData = new FormData();
    var fileInput = document.getElementById('fileInput');
    if (fileInput.files[0]) {
        formData.append("classified_id", 2);
        formData.append("file", fileInput.files[0]);
        axios({
                method: 'post',
                url: '/upload',
                data: formData,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data'
                },
            })
            .then(function(response) {
                console.log(response);
            })
            .catch(function(response) {
                console.error(response);
            });
    }
}
</script>
 <input type="file" id="fileInput" name="file"><br>
 <input type="button" value="submit" onclick="uploadFile()">

将单张图片从 axios 上传到 FastAPI："Expected UploadFile, received: <class 'str'>"

Upload single image from axios to FastAPI: "Expected UploadFile, received: <class 'str'>"

javascript

typescript

axios

react-admin

fastapi