Как получить файл из input type="file", передать его на FastAPI и загрузить на сервер
Всем привет, в общем такая проблема:
Не могу никак понять как взять данные из нескольких инпутов (текст, дата, файл) внутри одной формы, собрать словарик и передать его на бэкенд на FastAPI
Пока получается достать только текстовые данные (тексты и дату), но при попытке взять файл из input type="file", я как бы получаю File object, но перенести его в словарик не могу, постоянно приходит пустой словарь
--html--
<div class="reg-two-block-data">
<form id="formElem">
<input class="form-control" placeholder="Имя" type="text" id="name" name="name"/>
<div class="reg-two-block-data-photos" style="margin-top: 8px;">
<h6>Фотографии (от 1 до 4)</h6>
<div class="reg-two-block-data-photos-inner">
<div class="photo-1">
<div class="photos-1-outer">
<div class="photos-1-inner">
<img class="img1-place-holder" id="img1_place_holder" src="" alt="">
<input type="file" onchange="download_1(this)" accept="image/png, image/jpeg, image/jpg" id="img_1" name="img_1"/>
</div>
</div>
</div>
</div>
</div>
<input type="text" placeholder="Дата рождения" id="date_born"/>
</form>
<button onclick="send()" class="btn-save" type="button">
--js--
let file_1;
function download_1(input) {
file_1 = input.files[0];
console.log(file_1)
let reader1 = new FileReader();
reader1.readAsDataURL(file_1);
reader1.onload = function() {
let img1_place_holder = document.getElementById("img1_place_holder"); // получение img (куда вставить фотку)
img1_place_holder.src = reader1.result; // Вставка base64 в src
};
};
async function send() {
let formData = new FormData();
formData.append("file_1", file_1);
formData.append("file_2", file_2);
formData.append("file_3", file_3);
formData.append("file_4", file_4);
// Список пар ключ/значение
for(let [key, value] of formData) {
console.log(`${key} = ${value}`); // key1=value1, потом key2=value2
};
console.log(formData, 123123);
// получаем введенные в поля данные
const img_1 = document.getElementById("img_1");
const name = document.getElementById("name");
const date_born = document.getElementById("date_born");
const data = {
img_1: file_1,
images: formData,
name: name.value,
date_born: date_born.value,
}
// отправляем запрос
const response = await fetch("/hello", {
method: "POST",
headers: {"Accept": "application/json", "Content-Type": "application/json"},
body: JSON.stringify({...data})
});
};
--python-- (FastAPI)
@app.post("/hello")
async def hello(data=Body(), db: Session = Depends(get_db)): # request: Request,
print(data)
Еще раз напомню, в python data={"img_1": {}, "images": {}, "name": name, "date_born": date_born}. То есть img_1 и images пустые, пару дней уж точно на это потратил, и мозгов не хватает додуматься
Буду очень признателен за помощь)