fetch를 사용하여 멀티파트 폼 데이터를 게시하려면 어떻게 해야 합니까?

fetch를 사용하여 멀티파트 폼 데이터를 게시하려면 어떻게 해야 합니까?

다음과 같은 URL을 가져옵니다.

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

나의 API는 데이터가 다음과 같으리라 예상합니다.multipart/form-data그래서 사용하고 있습니다.content-type이런 유형의...하지만 상태 코드 400으로 답변을 해주고 있습니다.

내 코드에 무슨 문제가 있습니까?

당신이 설정하고 있는 것은Content-Type되려고multipart/form-data, 그러나 그 다음에 사용.JSON.stringify신체 데이터에 저장된 데이터에 저장되어 있습니다.application/json. 내용 유형이 일치하지 않습니다.

데이터를 다음과 같이 인코딩해야 합니다.multipart/form-data대신에json.보통multipart/form-data파일을 업로드 할 때 사용되며, 보다 조금 더 복잡합니다.application/x-www-form-urlencoded(HTML 양식의 기본값입니다.)

의 규격.multipart/form-dataRFC 1867에서 확인할 수 있습니다.

자바스크립트를 통해 그런 종류의 데이터를 제출하는 방법에 대한 가이드는 여기를 참조하세요.

기본 아이디어는 FormData 개체(IE < 10에서는 지원되지 않음)를 사용하는 것입니다.

async function sendData(url, data) {
  const formData  = new FormData();
      
  for(const name in data) {
    formData.append(name, data[name]);
  }

  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  // ...
}

이 문서에 따라 다음을 설정하지 마십시오. Content-Type 헤더. 브라우저가 당신을 위해 설정해 줄 것입니다.boundary매개 변수.

저는 최근에 IPFS와 함께 일하다가 이 문제를 해결했습니다.IPFS가 파일을 업로드하는 컬 예는 다음과 같습니다.

curl -i -H "Content-Type: multipart/form-data; boundary=CUSTOM" -d $'--CUSTOM\r\nContent-Type: multipart/octet-stream\r\nContent-Disposition: file; filename="test"\r\n\r\nHello World!\n--CUSTOM--' "http://localhost:5001/api/v0/add"

기본적인 아이디어는 각 부분(줄로 쪼개짐)입니다.boundary와 함께--) 자체 헤더가 있습니다(Content-Type예를 들어, 두 번째 부분에서.)객체가 이 모든 것을 관리하기 때문에 목표를 달성하는 데 더 좋은 방법입니다.

이것은 다음과 같이 API를 가져오는 것으로 해석됩니다.

const formData = new FormData()
formData.append('blob', new Blob(['Hello World!\n']), 'test')

fetch('http://localhost:5001/api/v0/add', {
  method: 'POST',
  body: formData
})
.then(r => r.json())
.then(data => {
  console.log(data)
})

            let formData = new FormData();
            formData.append('profile-image', document.getElementById("uploadDP").value);
            fetch('http://15.207.55.233/user/helper/profile-image', {
                method: 'PATCH',
                headers: {
                    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
                    'Content-Type': 'multipart/form-data'
                },
                body: formData
            })
                .then(res => res.json())
                .then(res => {
                    console.log(res);                   
                })
                .catch(err => {
                    console.log(err);
                })
        
    

언급URL : https://stackoverflow.com/questions/35192841/how-do-i-post-with-multipart-form-data-using-fetch