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

JS Fetch API를 사용한 파일 업로드

JS Fetch API를 사용하여 파일을 업로드하는 것은 처음에는 당황스러울 수 있습니다. 파일 입력을 사용하여 파일을 선택한 후 다음 단계는 fetch() 메서드를 통합하여 파일을 서버로 보내는 것입니다.

파일 업로드를 위해 fetch API를 활용하려면 다음이 필요합니다. FormData 객체를 생성합니다. 이 개체는 포함하려는 파일 데이터와 추가 양식 데이터를 모두 캡슐화합니다.

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data

코드에 예시된 대로 파일 외에도 추가()를 사용하여 양식에 다른 데이터를 추가할 수 있습니다. 아래:

data.append('user', 'hubot'); // Append additional form data

이제 fetch() 메서드를 사용하여 서버 엔드포인트에 POST 요청을 만들고 양식 데이터를 요청으로 전달할 수 있습니다. body:

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});

이 접근 방식을 사용하면 fetch API의 정교한 기능을 사용하여 파일 및 기타 데이터를 편리하게 보낼 수 있습니다.

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