我使用 javascript 和 FastAPI 構建了一個簡單的專案。我想將 javascript 中的畫布影像資料發布到服務器（FastAPI）。
但是，我收到 422 Unprocessable Entity 錯誤
# FastAPI
@app.post("/post")
async def upload_files(input_data: UploadFile = File(...)):
return JSONResponse(status_code = 200, content={'result' : 'success'})
// javascript
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
imageData = ctx.getImageData(0, 0, 112, 112);
fetch("http://{IP}/post", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
input_data: imageData,
}),
})
.then((response) => response.json())
這是我的代碼。我是 javascript 的新手。所以我不知道如何將資料發布到服務器。我能怎么做？提前致謝。
uj5u.com熱心網友回復：
MatsLindh 的方法是正確的，但是您可以嘗試通過 formdata 上傳圖片，這樣您就沒有轉換為 base64 然后轉換回圖片
const dataURItoBlob = function(dataURI : string) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString : string;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i ) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}
const url = canvas.toDataURL()
const file = dataURItoBlob(url)
//add file to formdata
const form = new FormData()
form.append('file', item.file)
//post this form in body
uj5u.com熱心網友回復：
UploadFile期望檔案以multipart/form-data格式發布到端點 - 即作為帶有一些添加元資料的常規 POST。
由于您正在檢索影像資料并將其作為 JSON 正文提交，因此與預期格式不匹配。您還希望canvas.toDataURL()在嘗試通過 API 提交內容之前將內容轉換為 base64 ，以避免 JSON 出現任何 UTF-8 問題。
const pngData = canvas.toDataURL();
// then in your request:
body: JSON.stringify({
input_data: pngData,
}),
要處理此請求，請更改您的視圖函式簽名以接收input_data引數（并使用比 更好的端點名稱post）：
@app.post("/images")
async def upload_files(input_data: str = Body(...)):
# check the expected format (content-type;<base64 content>)
# .. and decode it with base64.b64decode()
return {'content': input_data}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479854.html
標籤：javascript Python http 拿来 快速API
下一篇：持續提升帖子請求CPP