개발자

리액트에서 superagent를 활용해서 minio에 업로드하는 방법을 알려주세요 😂

2024년 06월 05일조회 77

제발 도와주세요 ㅜㅜㅜㅜㅜ 몇일동안 오류를 해결하지 못하고 있어요.. .. 리액트 웹에서 모바일 핸드폰으로 웹을 접속했을 경우, input을 통해서 사진을 업로드하거나 촬영한 이미지를 minio에 업로드 하고 싶은데, 아래 부분에서 계속 오류가 발생해서 도움을 요청해요 ㅠㅠ https://min.io/docs/minio/linux/developers/javascript/API.html#presignedPostPolicy 위 문서를 참고해서 코드를 작성했어요! [핸드폰으로 웹 접속 -> 사진 업로드/촬영 -> minio 업로드] 이 순서인데, minio에 이미지가 업로드가 되지 않고 계속 오류를 발생시켜요. superagent를 활용해서 minio에 업로드가 가능하다고, 위 문서를 참고해서 작성을 했는데, 계속 아래 에러 메시지를 전달받고 있어요ㅜㅜ 아래 에러를 게속 반환해요. <Error> <Code>MalformedPOSTRequest</Code> <Message>The body of your POST request is not well-formed multipart/form-data. (The name of the uploaded key is missing)</Message> <BucketName>bucket</BucketName> <Resource>/bucket</Resource> <RequestId>RequestId...</RequestId> <HostId>HostId...</HostId> </Error> f12 개발자 모드 페이로드 전달 데이터 bucket: 데이터 Content-Type: multipart/form-data x-amz-date: 날짜정보 x-amz-algorithm:데이터 x-amz-credential: 데이터 policy: 데이터 x-amz-signature: 데이터 file: (바이너리)

1ex) const images = [blob:http://localhost:5173/3ed53710-2706-46af-b088-7acadc229acd, blob:http://localhost:5173/3ed53710-2706-46af-b088-7acadc229acd,...]
2
3images.map(async(image, index) => {
4				const blob = await fetch(image).then(r => r.blob());
5				const req = superagent.post(minioData?.data?.postURL )
6				_.each(minioData?.data?.formData, (value, key) => {
7					req.field(key, value)
8				})
9				req.attach('file', blob, {filename: `${index}_${dateformat}.jpeg`})
10				req.end((err, res) => {
11					if(err) {
12						console.log(err);
13						message.error('사진 전송에 실패했습니다.');
14					}else {
15						message.success('사진 전송에 성공했습니다.');
16					}
17				})
18			})
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

김인후님의 프로필 사진

안녕하세요. superagent를 사용해서 업로드 하지 않아도 된다면 AWS-SDK를 사용해보는 건 어떨까요?

김인후님의 프로필 사진

김인후

software engineer2024년 06월 05일

만약에 aws-sdk를 사용하신다면 제가 예전에 간단하게나마 정리한 글이 있는 데 참고하시면 좋을 거 같아요. https://pinomaker.com/156

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 06월 05일

오류 메시지를 살펴보면, POST 요청의 body가 잘못된 multipart/form-data 형식이라는 것을 알 수 있습니다. 더불어, 업로드되는 key의 이름이 없다는 힌트도 제공하고 있습니다. superagent에서 파일을 첨부하기 위한 메서드 `req.attach('file', blob, {filename: `${index}_${dateformat}.jpeg`})`를 사용하셨는데, 여기서 'file' 대신 Minio에서 원하는 key 이름을 넣어야 할 것 같습니다. Minio의 경우 일반적으로 'file' 대신 'key' 값을 요구합니다. 따라서 아래와 같이 코드를 수정해보세요: ```javascript req.attach('key', blob, {filename: `${index}_${dateformat}.jpeg`}) ``` 그럼에도 불구하고 문제가 해결되지 않으면, superagent 전송 전에 formData 객체와 blob 객체를 콘솔에 출력하여 그 내용을 확인해 보세요. 이렇게 하면 잠재적인 문제가 발생하는 지점을 더 정확하게 파악할 수 있습니다. 추가로 Minio 측에서 어떤 형태의 데이터 구조를 기대하는지 확인하고 POST 요청을 보낼 때 이 조건을 만족시키고 있는지 다시 한 번 검토해보세요. 만약 여전히 문제가 해결되지 않으면 Minio에 직접 문제를 문의해보는 것도 좋은 방법입니다. 직접적인 해결 방법 외에도, Minio 측에서 제공하는 다양한 예제 코드를 확인하면 도움이 될 수 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!