Fetch API를 사용하여 로컬 파일을 가리키려는 양식 데이터 엔드포인트에 문자열 데이터를 JSON 파일로 업로드하는 방법

Question

타사 CDN의 API를 사용하여 호스팅된 Json 파일을 업데이트하고 싶습니다. 해당 문서에서는 이를 수행하기 위해 cURL을 사용하는 예제를 제공합니다. 올바른 cURL 요청은 다음과 같아야 합니다.

curl -X PUT 'https://endpoint.url.here'
  -H 'x-auth-token: <토큰>'
  -F 'file=@"경로/to/your/file"'

지금 저는 텍스트 필드에 Json 텍스트를 입력하는 React 페이지를 만들고 있으며, 버튼을 누르면 이 요청에 넣을 수 있도록 json 파일에 대한 경로가 있는 것을 시뮬레이션하고 싶습니다.

기본적으로 두 가지 질문이 있습니다.

<올>

Fetch API 사용이 제한되어 있습니다. 예제 cURL 요청을 올바르게 반영하기 위해 Fetch 요청을 구성하려면 어떻게 해야 합니까?

엔드포인트가 이를 허용하도록 텍스트 필드의 문자열을 파일 경로(파일 이름으로 끝나는 것이 좋음)로 어떻게 변환합니까?

파일 데이터를 Blob으로 변환하고 객체 URL을 다음과 같은 경로로 사용해 보았습니다.

const file = new Blob([jsonText], {type: 'text/plain'});
var blobURL = URL.createObjectURL(file);

또한 FormData를 사용하여 요청을 설정해 보았습니다.

let formData = new FormData();
formData.append('file', blobURL);

헤더 = {
        'x-auth-token': '<토큰>',
        '콘텐츠 유형': '다중 부분/양식 데이터'
    }

페이로드 = {
        방법: 'PUT',
        헤더: 헤더,
        본문: formData
    }

fetch('https://endpoint.url.here', 페이로드) ...

이 작업을 시도하면 백엔드가 "파일이 제공되지 않음"과 같은 오류로 응답하고 내 요청이 요구 사항을 충족하지 않는 것 같습니다. 이를 수행하는 더 좋은 방법이 있습니까? 샘플 요청에 더 잘 맞도록 제가 시도할 수 있는 제안이 있습니까?

Answer 1

예, 문제를 성공적으로 해결했습니다. 다음과 같은 작은 수정이 핵심입니다:

으아악

지금은 모든 것이 잘 돌아가고 있습니다!