# formData

a770418

오늘 포스팅할 내용 이번 포스팅은 협업을 할때 큰 문제중 하나였던 formData전송에 대해 알아보겠다. 우선 formData는 각종 미디어 정보를 전송 할 수 있는 형식이다. 이 formData를 전송하기 위해서는 몇 가지의 주의사항이 있는데 이번 포스팅에서는 필자는 어떤 문제를 겪었는지에 대해 알아보겠다. 필자의 문제 필자는 해당 formData 전송을 협업과정에서 해보면서 2가지의 문제를 겪었다. 겪은 문제는 아래와 같다 이제 해당 문제들을 해결했던 방법에 대해 알아보자 http method중 post 요청으로만 해당 데이터를 전송 할 수 있다는 사실을 몰랐다. 데이터를 보낼때 다른 데이터 들은 body에 전송할때 객체 형태로 보내지만 formData는 객체 형태로 보내면 전송이 되지 않는다. https method중 post 요청으로만 form 데이터 전송가능 문제 이 부분은 딱히 필자가 해결 할 수 있는 방법이 아니여서 서버 개발자분에게 해당

saekyulyang

프로필 수정, 리뷰 작성 기능을 구현하는데 계속 이미지 부분에서 에러가 나서 원인을 찾아봤다. 생각보다 간단한 문제였다. 여기서 formData.append 부분에 'image' 가 잘못되었다. 서버쪽 코드를 살펴보았다. 업로드 관련 코드를 찾아보다가 위 코드를 보고 file 로 요청을 보내면 되지 않을까? 싶어서 수정했다. 오늘도 편하게 자겠다... 아래의 글을 참고하였습니다. https://velog.io/@sheoae12/ReactNestJS-formData-400-%EC%97%90%

kinjoo

1. FACTS 최종 프로젝트 프론트엔드 진행 : 추억을 공유하는 커뮤니티 (마이크로 서비스 아키텍처) 중간 발표 튜터님 피드백 반영 S3 적용 2. FEELINGS 튜터님 피드백 중 프론트엔드에서 수정할 부분을 파악해보니 서비스적인 측면에서 생각하지 못했던 부분이 많았다. 이를 반영해서 팀원들과 같이 수정해나갔다. 3. FINDINGS S3를 적용하기 위해 기존 JSON 형태로 받아왔던 데이터를 formData 형태로 받아와야 했다. 프레임워크가 있었다면 자동으로 파싱이 되었지만, 사용하고 있지 않기 때문에 multer나 formidable 라이브러리를 이용해 직접 파싱을 해야했다. formidable로 파싱하면 텍스트 데이터는 fields에 이미지 같은 파일은 files에 담기게 된다. 이 객체들 안에 담긴 데이터를 뽑아와 기존에 우리가 받아왔던 params라는 객체 안에 담아 파라미터로 넘겼다. 기존 S3

ahs0895

강의를 들으면서 만들었던 버킷리스트 페이지에 완료 버튼을 추가하고 완료 버튼을 눌렀을 시에 버튼이 사라지고 버킷리스트에 완료!! 라는 텍스트가 추가하는 것이 조건이었다. 완성페이지 count = len(bucket_list)+1 과 doc= { 'num': count, 'done' : 0 은 시험을 위해 추가하라고 알려준 코드인데 원래 DB에는 버킷리스트 데이터만 들어갔기 때문에 들어간 버킷을 하나씩 완료시키기 위해 필요한 'num'와 완료가 됐는지 안됬는지 구분할 'done'을 만들어 줄 것을 미리 가이드 라인으로 준거 같다. 이제 조건에 맞춰 구현할 코드를 app.py와 index.html에 작성해야한다. 먼저 생각난 건 if 문이였다. 버튼과 텍스트 완료!!를 done이 0인 경우와 1인 경

plutoin

파일 첨부 기능을 만들다 한 오류를 마주하게 됐다. 압축 파일을 첨부할 때마다 사이트가 뻗어(?) 버렸다. 그렇게 큰 파일도 아닌데 왜 자꾸 렉 먹지? 이전에 만들었던 기능은 이미지 첨부 기능이었는데, preview를 수월하게 보여 주기 위해 base64로 변환해서 img src에 넣어 사용했다. 이미 만들어 둔 코드가 있으니 가지고 와 사용하려고 했으나 이런 문제가 생긴 것이다. 이사님이 코드를 살펴보시더니 base64로 변환했어요? 네....... 그거 쓰면 용량이 세 배로 커져서 그래요. 아? 그래서 쓰게 된 포스팅이다. Base64 Binary 데이터를 ASCII 코드와 매칭되는 문자열로 치환하는 방식을 사용한다. 8비트를 6비트로 표현하기 때문에 용량이 증가하게 된다. ex) 8bit 3개 = 6bit 4개 결과적으로 원본보다 용량이 33% 커지게 된다. ![](https://velog.velcdn.com/images/plutoin/post/cd7fb157

sarang_daddy

React로 이미지 업로드 기능을 구현하는데 발생했던 버그들로 고생을 했다.. 정리하고 기록해서 나중에는 벌레 잡는데 걸리는 시간을 줄이자 😅 1차 구현 : 재업로드가 안되는 문제 2차 구현 : 중복되는 이미지가 올라가는 문제 3차 구현 : 해결 1차 구현 참고자료 화면에 업로드한 이미지 보여주기 [이미지 업로드 하기](https://velog.io/@edie_ko/React-%EC

cornpip

RequestParam application/x-www-form-urlencoded 타입 헤더에 dto로 받을 때 (1)은 못 들어오고 (2)는 잡힌다. (Dto는 setter있어야 잡힌다.) dto아니면 (1)도 잡고 (2)도 잡는다. boolean type은 true, True, tRUE 등 text만 맞게 보내면 된다. RequestBody body의 경우 사용해야 잡힌다. ? RequestParam이 잡는게 뭐지? (일단 쓰지 말자)

sumi-0011

시작하며 현재 '데이터베이스' 수업을 듣고 있는 친구한테 갑자기 연락이 왔다. 오늘 까지 텀프로젝트 제출 마감인데.. 발생한 문제를 해결할 수가 없다고, 도와달라고 연락이 왔다 밑의 사진처럼, 검색을 눌렀을 때 헤더가 중복해서 생성이 되는데 이유를 찾지 못한 상황이였다. 코드 살펴보기 친구는 웹프로그래밍을 공부한 적이 없어서 Chat GPT에 의존해서 과제를 하고 있어서 동작 원리 등을 모르고 있었다. "데이터 베이스" 수업에서는 html, css, js, php를 쓰고있는데 그중 php는 잘 알지 못하는 언어라 먼저 디버깅을 해보기로 했다. 아래는 검색 버튼을 눌렀을때 formData를 모아 서버에 전송하는 php코드이다. 이 부분에서 브라우저에 실제

hvvany

이미지 저장 시 절대경로! 이미지 파일을 사용자로 부터 입력 받아 처리하기 까지 매우 복잡하여 정리를 해본다. 1. html 에서 input type=”file”로 입력 받기 ArticleBoardNewView 그러면 다음과 같이 input 요소가 생긴다 2. API로 전송 시 JSON 말고 formData로 보낸다 처음에 이미지를 JSON 형태로 고칠려고 했으나 불가능. JSON을 formData객체에 함께 담아서 보내줘야 한다. ArticleBoardNewView 의 method 내부 post요청 부분 Blob : Binary Large Object. → javascript에서 이미지, 음성 등 대용량 데이터 다루는 객체 3. 백엔드 Con

cxxxtxxyxx

프로젝트에서 클라이언트로부터 이미지를 받아 저장하는 과정에서 해당 오류가 생겼다. 처음 겪는 오류라 해결하는 과정에서 애를 먹었던 것 같다. 문제 React에서 서버 쪽으로 image를 보내는데 해당 에러가 발생했다. 인터셉터를 통해 request 헤더의 로그를 찍어보니 Postman으로 요청을 보낼 땐 boundary가 자동 생성되어 잘 전달되고, 이미지 또한 잘 저장되었다. 그러나 client단에서 요청을 보내면 boundary가 생성되어 전달되지 않아서, 서버 측에서 해당 요청에 대한 데이터 구분을 못하는 상황 <img src="https://velog.velcdn.com/images/cxxxtxxyxx/post/b1

doldory55

반갑다. 첫 velog 글이다. 암튼, 어제로부터(2023/3/13) 딱 한달 전 나는 한 프로젝트를 v2로 만들게 되었다. 그래서 v2를 만들던 중 이미지 업로드 기능을 구현해야했다. 예전에 해커톤에서도 이미지 업로드를 해본 경험이 있어서 한번 해봤는데, 내가 짜본 이미지 업로드 방식이 좀 달랐다. 무슨 방식이냐고?? 간단하다. 이미지들을 FormData에 담고 서버로 보내면 서버가 이미지 url을 보내준다. 그리고 다시 그 url과 글 등등을 서버로 보내는 방식이다. 그래서 내가 훗날 이미지 업로드하는 법을 까먹게 된다면 이 글을 통해 참고 할려고 쓰게되었다. 암튼 아래 이미지 업로드 코드를 보면 이미지를 길이만큼 반복문을 돌려 FormData에 담는다. 비동기로

vivid0930

FormData Blob을 이해하기 전에 FormData에 대한 이해가 필요하다. FormData는 HTML form 요소를 통해 전송되는 데이터를 캡슐화하기 위한 JavaScript의 인터페이스다. FormData 객체를 사용하면 파일 업로드와 같은 이진 데이터를 포함하는 AJAX 요청을 보낼 수 있다. 다음은 FormData 객체를 사용하여 username과 password를 전송하는 예시 코드다. 위 코드에서 append() 메서드를 사용하여 username과 password 키와 각각의 값인 john과 pass123을 추가했다. 또한, FormData 객체는 파일 업로드와 같은 이진 데이터를 처리할 수 있다. 아래는 FormData 객체를 사용하여 이미지 파일을 전송하는 예시 코드다. 위 코드에서 append() 메서드를 사용하여 image 키와 파일 객체를 추가했다. 이 때, file은 input 요소의 files 프로퍼티에서 선택한 파

3436rngus

🪴 formData 객체 👉 formData 객체는 key, value 형식으로 되어 있는 객체이다. 👉 FormData 객체는 데이터를 multipart/form-data 형식으로 전송할 수 있다. 🪴 로컬에 있는 이미지를 업로드하기 👉 input 의 type, accept, ref, onChange, style 속성을 이용하여 로컬 이미지 주소 가져오기 👉 sytle 속성에 display: none 을 부여하고 button 요소로 커스텀할 수 있다. <img src="https://velog.velcdn.com/images/3436rngus/pos

ung6860

에러상황 Spring 실습 중 ajax를 이용한 비동기 방식으로 multipart-data를 요청받아 업로드 및 DB등록을 하는 기능을 구현하던 상황. 분명히 ajax에서 설정을 완료하고 console.log에도 데이터가 입력되는 것을 확인하였으나 controller에서 지속해서 null값 반환함. 각 부분별 코드는 아래와 같다. 🖥️ ajax 🖥️ controller 넘어오는 방식이나 요청을 받는 위치에서의 문제는 없었다. 근데 아래와 같이 오류가 나는 것이다. 원인을 찾기 위해서 구글링을 열심히 했지만 Json으로 데이터를 넘겨주지 않았다던지 @RequestBody를 사용하지 않았다던지 하는 등의 이유들을 모두 고려해서 코드를 수정해도 오류는 동일하게 발생하였다. -

alsgood4007

이 글을 쓰게 된 이유 메인 프로젝트를 진행하게 되면서 이미지 데이터를 관리하는 역할을 맡았다. 부트캠프에서는 따로 교육을 받지 않아 많은 시도를 하던 끝에 FormData를 사용하여 서버와 통신하여 이미지 데이터를 관리하는 법을 공부하였다. FormData란? 폼을 쉽게 보내주도록 도와주는 객체 PreView 나타내기 우선 사용자가 이미지를 선택 시 어떤 이미지를 선택하였는지 알 수 있도록 이미지 파일을 선택시 URL.createObjectURL 메소드를 사용하여 이미지 blob 파일을 URL로 변환하여 이미지를 해당 윈도우에서 렌더 할 수 있도록 만들었다. 🖐️ URL.createObjectURL 사용 구조 > 이미지 blob 파일을 URL로 변환하여 이미지를 해당 윈도우에서 렌더 할 수 있도록 만들었다. 해당 URL은 사용자의 Window에서만 작동이 되고 Window를 종료시 자동으로 사라지는 구조이다. 하지만 createObject

hang_kem_0531

업무 중, 이미지 파일을 서버에 보내주는 작업이 필요했는데 이전 해커톤과 기업협업 때 사용했던 formdata 객체가 명확히 기억이 나지 않아서 다시 한번 정리 후에 작업을 해보려고 한다. FormData FormData는 ajax로 폼을 쉽게 보내주도록 도와주는 객체이다. 여기서 FormData 객체는 HTML 폼 데이터를 나타낸다. > HTML form HTML `` 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. Enter your name: <lab

avakim

왜 파헤치게 되었는가 결론부터 말하자면, 아무리 찾아도 그 어디에도 설명이 없어서 🤯 multipart/form-data로 이미지 데이터를 전송 할 때는 아래와 같은 형태로 formData에 append 해야 한다는데, 어떤 공식문서에도 명시되어 있지 않고 이 형태를 지켜야 한다는 걸 대체 어디서 알았는지 출처를 밝힌 블로그 포스트도 없었다. 너무 답답한데!! 궁금한데!! 스프린트 돌려야하니까 내 궁금증은 고이 접어두고 일단 써서 해결할까 했지만, J님이 그러지 말라고 하셨다. 파헤쳐라!하셔서 그렇다면?😏 하고 열심히 파헤치러 갔다. 상황 RN 앱에서 이미지를 서버에 업로드 해야했다. 이미지는 파일이니까 일단 구글링을 해본다. _출처: [https://medium.com/20spokes-whiteboard/uploading-images-from-react-native-to-your-server-6539082f9051](https://medium.

francesco419

Reason 개인 프로젝트 진행 중에 백엔드를 기초적인것만 사용하고 있기에 이미지 데이터 및 모든 데이터를 DB에 저장하고 있었다. 배포를 하기전이라 이미지파일을 로드하면 "localhost ... /'이미지파일이름'"이렇게 된 url(?)이 데이터로 저장이된다. 저장된 데이터를 DB에서 불러오면 당연하게도 정상적인 이미지가 로드되지는 않는다. 따라서, 이미지를 어떻게 효율적으로 로드시킬까 정보를 찾다가 이미지를 백엔드 파일에 저장시키고 DB에는 저장된 경로를 저장하는 방식에 대해 찾게되었다.(원래는 이미지를 웹에 올리고 해당이미지의 URL을 저장할까 했지만...너무 단순무식한 방식) 해당 방식은 백엔드에 multer를 설치 해야한다. Use 기본중의 기본만

cloud_oort

상황 회원가입 도중 프로필 사진을 업로드하는 기능을 구현하려 한다. 원하는 것 항상 느끼는 것이지만 원하는 것이 무엇인지 명확히 해야 한다. 그래야 해결책을 찾을 수 있다. 1. 이미지 클릭하면 이미지 업로드하기 2. 이미지 업로드하는 버튼 따로 만들기 3. 이미지 업로드하면 프로필 사진에 업로드한 이미지 사진 띄우기 4. 이미지 URL 반환받기 구현 기타 관련없는 코드는 삭제했으므로 필요한 부분만 참고할 것 특이사항 이미지 파일은 file 타입의 input이 받되, 화면에는 보이지 않게 한다. 프론트 엔드 코드에 한정된 부분이기 때문에 AWS S3 관련 코드는 없다. 이미지 파일을 서버에 보내고, 서버는 받은 이미지 파일을 S3에 저장하고 받은 URL 값을 클라이언트로 반환해준다. 느낀 점 처음에는 굉장히 어려워보였고, 구현하는데도 실제로 오래 걸렸다. 근데 모르는 것을 찾아보면서 구현에

dev-sjko

미술 작품 거래 서비스(Decouvrir) 프로젝트를 할 때, 유저가 자신의 작품을 판매하기 위해 직접 상품을 등록할 수 있는 기능이 필요했다. 그 기능의 포인트는 이미지를 첨부파일로 받아서 DB에 상품 이름, 가격 등과 함께 저장하는 로직이었는데, 이를 위해서 > AWS S3에 이미지를 업로드 이미지 url을 클라이언트로 일단 응답 클라이언트에서는 그 경로와 함께 다른 텍스트 정보들을 서버에 전달 서버에서 상품 DB에 정보를 저장 위와 같은 방법으로 최종 정리되었다. 여러 서칭을 통해 AWS S3 버킷 세팅을 마쳤고 multer-s3를 이용해 파일을 업로드 하기 위한 imageRouter의 코드는 아래와 같이 작성했다. 이렇게 작성을 하고 postman을 통한 테스