Wątek przeniesiony 2023-07-31 10:04 z JavaScript przez Riddle.

Jak wykonać upload obrazka?

0

Czesc ostatnio powrocilem do swojego projektu gdzie korzystam z fetch() aby zaimplementowac metode PUT. Problem pojawia sie przy wysylaniu requestow ktore zawieraja pliki a jest to dla mnie wazna funkcjonalnosc. na razie pozwolilem sobie maksymalnie uproscic przejrzystosc requesta nie uzywajac obiektu FormData tylko JSON.stringify().

function edytpost(){
 const photo=document.getElementById('photojs')
 const finalphoto=photo.files[0]
 console.log(finalphoto)
 const requestOptions = {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ "text":"texttest","title":"titletest","file": finalphoto })
 };
 fetch('http://localhost:8080/popraw/91', requestOptions)
    .then(console.log("done"))
}

po wykonaniu funkcji wywolywanej w inpucie

<input type="button" id="edytowanko" value="Submit" onclick="edytpost()">

wita mnie blad

PUT http://localhost:8080/popraw/91 400
edytpost @ (index):95
onclick @ (index):213

screenshot-20230730200012.png

Nad samym bledem chwile sie juz glowie , przeanalizowalem troche wpisow na stackoverflow ale mozliwe ze cos pominelem , dodam jeszcze ze gdy zamiast finalphoto uzyje null request przechodzi bez szwanku .Backend zostal napisany w spring boocie.

2

API odpowiada 400 Bad Request, sam sobie dałeś podpowiedź, coś z serializacją, popatrz w logi w Spring Bootowej apce

0

400 to "bad request", czyli sprawdź, co faktycznie przekazujesz do serwera

JSON.stringify({ "text":"texttest","title":"titletest","file": finalphoto })

W szczególności, co masz pod kluczem file, bo pewnie {}, bo tak nie zserializujesz pliku.

0
LukeJL napisał(a):

400 to "bad request", czyli sprawdź, co faktycznie przekazujesz do serwera

JSON.stringify({ "text":"texttest","title":"titletest","file": finalphoto })

W szczególności, co masz pod kluczem file, bo pewnie {}, bo tak nie zserializujesz pliku.

Rzeczywiscie {"text":"texttest","title":"titletest","photo":{}} klucz file jest w srodku pusty.Jednak jest to juz jedna z rzeczy ktore udalo mi sie zauwazyc gdy uprzednio podchodzilem do projektu , jednak nie wiem jak zdeserializowac ten plik poniewaz metoda ktorej uzylem jest jedyna ktora udalo mi sie znalezc (byc moze slabo szukalem ) .

0
Productionserver napisał(a):

API odpowiada 400 Bad Request, sam sobie dałeś podpowiedź, coś z serializacją, popatrz w logi w Spring Bootowej apce

niestety logi w spring boocie puste ale kiedys owe pojawialy sie jednak pamietam ze gdy jeszcze miesiac temu dzialalem w tym projeckie w inaczej skonstruowanej ale tej samej metodzie pojawial sie taki blad ,niestety dysponuje tylko starymi screenami wiec kodu nie wrzuce tylko linki do zdjec https://pasteboard.co/iv3GoDEyBaLr.png https://pasteboard.co/zjiPhZkjFFZe.png

0

Pogrzebalem troche w moim kodzie i zauwazylem dwa bledy , w js'ie ktore wyszly na jaw po ukazaniu sie errora Content-Type 'multipart/form-data;boundary=---------------------------362743827537539986942350575778;charset=UTF-8' is not supported. .Okazalo sie ze uzywam application/json natomiast gdy w naszym kodzie wystepuje <input type="file"> nalezy uzywac
multipart/form-data wiec nalezy w spring boocie edytowac endpointa odpowiedzialnego za PUT .@RequestBody zmieniamy na @ModelAttribute .Jednak mimo tej zmiany napotykam na kolejny blad przez ktory wszystkie wartosci w keyach zwracaja null aczkolwiek nie ma to juz zwiazku z js'em i kontynuacja watku nie powinna miec miejsca na forum od JS'a

0
presents1mple napisał(a):

Okazalo sie ze uzywam application/json natomiast gdy w naszym kodzie wystepuje <input type="file"> nalezy uzywac
multipart/form-data wiec nalezy w spring boocie edytowac endpointa odpowiedzialnego za PUT .@RequestBody zmieniamy na @ModelAttribute .

Gdzie tak przeczytałeś? @ModelAttribute jest używane w Spring MVC i nie powinno dotyczyć twoich problemów z plikami.

0
kixe52 napisał(a):
presents1mple napisał(a):

Okazalo sie ze uzywam application/json natomiast gdy w naszym kodzie wystepuje <input type="file"> nalezy uzywac
multipart/form-data wiec nalezy w spring boocie edytowac endpointa odpowiedzialnego za PUT .@RequestBody zmieniamy na @ModelAttribute .

Gdzie tak przeczytałeś? @ModelAttribute jest używane w Spring MVC i nie powinno dotyczyć twoich problemów z plikami.

XHRPUT
http://localhost:8080/popraw/91
[HTTP/1.1 415  12ms]

415 localhost:8080:106:13
Object { type: "about:blank", title: "Unsupported Media Type", status: 415, detail: "Content-Type 'multipart/form-data;boundary=---------------------------37432510395554362981406621338;charset=UTF-8' is not supported.", instance: "/popraw/91" }
​
detail: "Content-Type 'multipart/form-data;boundary=---------------------------37432510395554362981406621338;charset=UTF-8' is not supported."
​
instance: "/popraw/91"
​
status: 415
​
title: "Unsupported Media Type"
​
type: "about:blank"
​
<prototype>: Object { … }
localhost:8080:108:17
FormData(3) { text → "adsdfds", title → "adsdfds12312", file → {} }
​
<entries>
​
<prototype>: FormDataPrototype { append: append(), delete: delete(), get: get(), … }

w postmanie

{
    "type": "about:blank",
    "title": "Unsupported Media Type",
    "status": 415,
    "detail": "Content-Type 'multipart/form-data;boundary=--------------------------479121539883613890819162;charset=UTF-8' is not supported.",
    "instance": "/popraw/91"
}

udalo mi sie znalezc nastepujace posty na stackoverflow z ktorych wynioskowalem swoje potencjalne bledy
https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean
https://stackoverflow.com/questions/48051177/content-type-multipart-form-databoundary-charset-utf-8-not-supported
use multipart/form-data when your form includes any <input type="file"> elements zmienilem headera na multipart/form-data co za tym idzie musialem tez zmienic @RequestBody na @ModelAttribute na podstawie @RequestBody means to parse JSON data into map or java beans and only support content type is "application/json;charset=UTF-8"

0

Dziekuje za wszelka pomoc , problem udalo sie rozwiazac , nie lezal on po stronie js'a a koknstrukcji controllera znajdujacego sie w springu .W zly sposob przyjmowalem pliki do controllera co poprawilem korzystajac z MultipartFile jako obiektu do ktorego przyjmuje plik.

1 użytkowników online, w tym zalogowanych: 0, gości: 1