Как получить файл из 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 пустые, пару дней уж точно на это потратил, и мозгов не хватает додуматься

Буду очень признателен за помощь)


Ответы (0 шт):