JavaScript Fetch API를 사용하여 파일을 업로드하려면 어떻게 해야 합니까?

JS Fetch API를 사용하여 파일 업로드: 비밀 공개

JS fetch API를 사용하여 파일을 업로드하는 방법을 이해하는 것은 어려운 작업일 수 있습니다. 이 개념을 명확히 하기 위해 제출 이벤트 캡처 시 업로드할 파일을 보내는 방법을 분석하겠습니다.

먼저, 입력 태그를 사용하면 파일 입력을 사용하여 파일(또는 여러 개)을 선택할 수 있다는 점을 기억하세요. 방법. 제출 이벤트를 포착하려면 코드에 적절한 이벤트 핸들러를 지정해야 합니다.

이제 중요한 부분인 가져오기를 사용하여 파일을 전송합니다. 이에 대한 구문은 다음과 같습니다.

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

파일을 성공적으로 보내려면 본문 속성을 파일 데이터로 채우고 올바른 Content-Type 헤더를 설정해야 합니다. 다음은 이를 수행하는 방법을 보여주는 향상된 코드 조각입니다.

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

이 코드에서 FormData는 새 양식 데이터 개체를 만드는 데 사용되며 파일 데이터는 추가 메서드를 사용하여 추가됩니다. Content-Type 헤더는 파일 업로드 요청에 필요한 multipart/form-data로 자동 설정됩니다.

이를 사용하면 코드에서 fetch API를 사용하여 파일을 서버에 쉽게 업로드할 수 있습니다.

위 내용은 JavaScript Fetch API를 사용하여 파일을 업로드하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!